CSS:石積みレイアウト

石積みレイアウトとは何ですか?

MDN より:

石積みレイアウトは、一方の軸が典型的な厳密なグリッド レイアウト (ほとんどの場合は柱) を使用し、もう一方の軸が石積みレイアウトを使用するレイアウト方法です。石積みの軸では、短いアイテムの後に隙間が残る厳密なグリッドに固執するのではなく、次の列のアイテムが盛り上がって隙間を完全に埋めます。

pinterest.com のレイアウトはその典型的な例です:

CSS ツールボックスから何が使用できますか?

グリッド

単純な HTML マークアップを使用します。

<div>



<p>My first shot was grid & grid-template-column<br>
</p>

<pre class="brush:php;toolbar:false">.photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;

  img{
    width: 100%;
  }
}

応答性は優れていますが、各画像の下に隙間があります。

列数

次に、column-count CSS コンテナー プロパティを使用します。

CSS の columns-count プロパティは、要素のコンテンツを指定された列数に分割します。

.photos {
  column-count: 4;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}

良くありません。
現在のレイアウトは希望通りに見えますが、画像は拡大縮小され、応答しません。メディア クエリを使用して応答性を制御することもできますが、私たちはより堅牢なソリューションを目指しています。

列の使用

Columns CSS 短縮表現プロパティは、要素のコンテンツを描画するときに使用する列の数と、それらの列の幅を設定します。

.photos {
  columns: 250px;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}

単一行のコード。すごいですね！

これはどのように作動しますか？

各列の最小幅は 250 ピクセルです。 250 ピクセルを超える余分なスペースがある場合、列はスペースを埋めるように拡張されます。スペースが減ると、それに応じて列の数も減ります。

エクストラ

レイアウトを最大 X 列に設定することで、列数を制限できます。

.photos {
  columns: 250px 2;
  ...
  ...
}

列
石積みの画像レイアウトだけに限定されるものではありません。また、同じ CSS で異なるコンテンツなど、テキスト列のスタイルを設定するために使用することもできます。

最終的な考え

これは役に立ちましたか?
あなたのユースケースは何でしたか?

以上がCSS:石積みレイアウトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。