CSS で高さが異なる石積みグリッド レイアウトを作成する方法

フレックスボックスまたはその他のレイアウトを使用した CSS メーソンリー グリッド

要素の高さが異なるグリッド レイアウトを CSS で作成するのは難しい場合があります。フレックスボックスは柔軟性を提供しますが、新しい要素を前の要素の下部に揃えるという要件を満たさない可能性があります。

CSS グリッド レイアウトの紹介

フレックスボックスの代わりに、次のことを検討してください。この目的のために CSS グリッド レイアウトを活用します。これは、石積みグリッドを実現するためのより堅牢かつ直感的な方法を提供します:

HTML構造:

<grid-container>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  ...
</grid-container>

CSS:

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

説明:

1. display:grid: コンテナをグリッドとして初期化しますlayout.
2. grid-auto-rows: 50px: 各グリッド行の高さを 50 ピクセルに設定します。
3. grid-gap: 10px: グリッド間の間隔を指定しますitems.
4. grid-template-columns: グリッド内の列の数 (自動入力) と各列の最小幅 (min-content: 30%、1fr) を定義します。 .
5. grid-row:span X: 項目が X を占めることを示しますグリッド行の数。

以上がCSS で高さが異なる石積みグリッド レイアウトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。