CSS グリッド レイアウトを使用して、さまざまな高さの要素を含む石積みグリッドを作成するにはどうすればよいですか?

CSS グリッド レイアウトを使用して石積みグリッドを作成する

CSS では、さまざまな高さの要素を含むグリッド効果を実現するのが難しい場合があります。ただし、最近導入された CSS グリッド レイアウトは強力なソリューションを提供します。

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

CSS グリッド レイアウトを使用して石積みグリッドを作成するには、次の手順に従います。 :

1. グリッド コンテナを定義します: グリッド コンテナを作成するには、display:grid プロパティを使用します。
2. 自動行の高さを設定します: Grid-auto-rows プロパティを使用して、グリッド内の各行のデフォルトの高さを指定します。これにより、異なる行の要素の垂直方向の間隔が均等になります。
3. 間隔の調整: Grid-gap プロパティを使用して、グリッド項目間の水平方向と垂直方向の間隔を設定します。
4. 列サイズを定義します: Grid-template-columns プロパティを使用して、グリッド内の列のサイズを指定します。ここでは、自動入力を設定して柔軟な列サイズのグリッドを作成しますが、minmax(30%, 1fr) により列の幅が少なくとも 30% になり、必要に応じて拡張できるようになります。

石積みグリッドの実装

石積みグリッドを作成するための HTML と CSS コードの例を次に示します:

<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>

grid-container {
  display: grid;
  grid-auto-rows: 50px;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}

[short] {
  grid-row: span 1;
  background-color: green;
}

[tall] {
  grid-row: span 2;
  background-color: crimson;
}

[taller] {
  grid-row: span 3;
  background-color: blue;
}

[tallest] {
  grid-row: span 4;
  background-color: gray;
}

このコードは、異なる高さの要素が配置された石積みグリッドを作成します。等間隔のグリッド状の構造に自動的にレイアウトされます。

以上がCSS グリッド レイアウトを使用して、さまざまな高さの要素を含む石積みグリッドを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。