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

石積みグリッド効果の CSS グリッド レイアウトを作成する

課題: 高さが不均一なグリッド要素

石積みグリッド効果を実現するには、次のことが必要ですさまざまな高さの要素を、下の要素の位置に影響を与えることなく完全に整列させることができます。ただし、float や flexbox などの従来の方法では、この要件を完全には満たさない可能性があります。

解決策: CSS グリッド レイアウト

最適なパフォーマンスを得るには、CSS グリッド レイアウトを利用することを検討してください。これは、CSS グリッド レイアウトを処理するために特別に設計された強力なツールです。複雑なグリッド レイアウト:

1. グリッド プロパティの定義 (grid-container): まず、display:grid を使用してグリッド コンテナーを定義します。 Grid-auto-rows を希望のデフォルトの行の高さ (例: 50px) に設定します。グリッド ギャップは、グリッド要素間の間隔を制御します。
2. 列を自動的に設定 (grid-template-columns): 作成するには、repeat(auto-fill, minmax(30%, 1fr)) を使用します。利用可能なスペースに基づいて幅を自動的に調整する列。最小 30% により、要素に十分な幅が確保されます。
3. 行範囲の調整 (グリッド行): 個々の要素のグリッド行プロパティを使用して、要素が占める行数を決定します。必要な高さに応じて、スパン 1、スパン 2 などを指定するだけです。

例:

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

.short {
  grid-row: span 1;
}

.tall {
  grid-row: span 2;
}

.taller {
  grid-row: span 3;
}

.tallest {
  grid-row: span 4;
}

このコードは、要素の幅が自動的に変化するグリッドを作成します。グリッドの位置合わせに影響を与えることなく。各要素の高さは、指定された行範囲によって決まります。

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