CSS グリッド レイアウトを使用して、各要素の幅が同じで、下部の要素が常に上部の要素より 50 ピクセル下にある石積みグリッドを作成するにはどうすればよいですか?

CSS グリッド レイアウト (またはその他の CSS) を使用して石積みグリッドを作成する

質問は石積みを実現する方法を求めています。さまざまな高さの要素を含む CSS のグリッド効果。各要素の幅は同じですが、下部の要素は常に上部の要素より 50 ピクセル下にあります。ユーザーはフロートとフレックスボックスを使用しようとしましたが、問題が発生しました。

CSS グリッド レイアウトの使用

解決策は、強力で強力な機能を提供する CSS グリッド レイアウトを使用することです。グリッドを作成する柔軟な方法。次の CSS コードは、目的の効果を実現する方法を示しています。

grid-container {
  display: grid;             /* Enables the grid layout */
  grid-auto-rows: 50px;      /* Defines the height of each row to 50px */
  grid-gap: 10px;            /* Sets the gap between the grid items */
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* Defines the columns to have a minimum width of 30% */
}

[short] {
  grid-row: span 1;         /* Makes the element span only one row */
  background-color: green;
}

[tall] {
  grid-row: span 2;         /* Makes the element span two rows */
  background-color: crimson;
}

[taller] {
  grid-row: span 3;         /* Makes the element span three rows */
  background-color: blue;
}

[tallest] {
  grid-row: span 4;         /* Makes the element span four rows */
  background-color: gray;
}

このレイアウトを使用する HTML コードは次のとおりです。

<grid-container>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
</grid-container>

このコードを使用すると、石積みを実現できます。さまざまな高さの要素を一貫性と応答性の高い方法で配置したグリッド効果。

以上がCSS グリッド レイアウトを使用して、各要素の幅が同じで、下部の要素が常に上部の要素より 50 ピクセル下にある石積みグリッドを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。