CSS グリッド レイアウトでの列の並べ替え

CSS グリッド レイアウトでは、列の順序を変更して目的を達成するためのさまざまなテクニックがあります。特定のレイアウト。この質問では、デスクトップ レイアウトで必要な列の順序を維持しながら列を一番下に移動するなど、モバイル レイアウトの列を再配置する可能性について検討します。

ソリューション オプション:

]
1. grid-template-areas: このプロパティを使用すると、グリッド内に名前付き領域を定義し、それらの領域にグリッド項目を割り当てることができます。名前付き領域を使用すると、ソース コード内の最初の順序に依存せずに、項目のレイアウトと順序を制御できます。
2. ラインベースの配置: ラインベースの配置を使用すると、次のことができます。 Grid-column-* プロパティを使用して、項目を配置する列を指定します。グリッド項目を特定の列に割り当てることで、グリッド内での順序と位置を制御できます。
3. order プロパティ: order プロパティを使用すると、グリッド項目に関係なく表示される順序を定義できます。ソースコード内の最初の順序付け。順序値を指定することで、グリッド内の項目の視覚的な順序を決定できます。
4. grid-auto-flow の dense 関数: Grid-auto-flow の dense 関数は、グリッド レイアウトを最適化します。グリッド項目の配置を自動的に調整して、可能な限り効率的に利用可能なスペースを埋めます。これは、質問のモバイル レイアウトを実現するために使用できます。小さい画面サイズに合わせて、必要に応じて項目が新しい行に移動されます。

サンプル コード:

次の例は、質問で説明されているモバイル レイアウトを実現するための関数 Grid-auto-flow:density の使用を示しています。

.container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-flow: dense; /* optimizes item placement */
}

このコードを使用すると、利用可能なスペースを効率的に埋めるためにグリッド項目が自動的に再配置され、目的のモバイル レイアウトが得られます。