モバイル対応のために CSS グリッド レイアウトの列を再配置するにはどうすればよいですか?

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

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

解決策のオプション:

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

サンプル コード:

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

<code class="css">.container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-flow: dense; /* optimizes item placement */
}</code>

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

以上がモバイル対応のために CSS グリッド レイアウトの列を再配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。