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

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

要素の高さは可変だが同じ幅を持つ応答性の高いグリッド レイアウトを実現するには、以下を使用するのが難しい場合があります。フレックスボックスまたはフロート。代わりに、強力な CSS Grid Layout モジュールの利用を検討してください。

CSS Grid Layout は、複雑なグリッド レイアウトを作成するための柔軟で効率的なソリューションを提供します。

1. Display: 表示するコンテナ要素を設定します: グリッド グリッド コンテナであることを示します。
2. Grid Auto-Rows: グリッドの一貫した高さを指定しますGrid-Auto-Rows を使用した行数: 50px。これにより、各行のデフォルトの高さが設定されます。
3. グリッド ギャップ: グリッド ギャップ: 10px でグリッド項目間にスペースを追加します。
4. グリッド テンプレート列: グリッド テンプレート列を使用して列レイアウトを定義します:repeat(auto-fill, minmax(30%, 1fr))。これにより、少なくとも 30% 幅の列を含むグリッドが作成され、残りのスペースが均等に埋められます。
5. 行の分割: 個々のグリッド項目の Grid-Row プロパティを使用して、行数を制御します。スパン。たとえば、[tall] は 2 行にまたがり、[tallest] は 4 行にまたがります。

HTML 例:

<grid-container>
  <grid-item short></grid-item>
  <!-- ... more grid items -->
</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;
}

/* ... more grid item styles */

これらの CSS ルールを適用すると、要素が動的に高さを調整し、バランスの取れた応答性の高いレイアウトを確保する石積みのようなグリッド システムを実現できます。

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