cssメーソンリーグリッドまたはFlexBoxまたはその他のレイアウト

を使用して、要素がさまざまな高さを持つCSSでグリッドレイアウトを作成することが困難です。 FlexBoxは柔軟性を提供しますが、新しい要素が前の要素の下部と一致するという要件を満たしていない場合があります。石積みグリッドを実現するためのより堅牢で直感的な方法を提供します：

HTML構造：

...

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

ディスプレイ：グリッド：コンテナをグリッドレイアウトとして初期化します。ピクセル。 1fr）。