CSS グリッド レイアウトで列を再配置するにはどうすればよいですか?

CSS グリッドでの列の順序の変更

CSS グリッドでは、グリッドを使用して列と行の数を指定することで、グリッドのレイアウトを定義できます。 template-columns プロパティと Grid-template-rows プロパティ。ただし、これらの列の順序を並べ替えるのは難しい場合があります。

解決策: 高密度キーワードを使用したグリッド自動フロー

グリッド項目を並べ替える方法は複数ありますが、 dark キーワードを Grid-auto-flow プロパティとともに使用すると、シンプルで効率的な解決策が得られます。

<code class="css">grid-auto-flow: dense;</code>

dense キーワードは、空のグリッド セルにグリッド アイテムを自動的に埋め込むようにブラウザーに指示し、それらを移動してグリッド項目に埋め込みます。

例への適用

既存のグリッド クラスにdensityキーワードを追加すると、モバイル レイアウト上で列が自動的に再配置されます。希望の順序に一致します:

<code class="css">.my-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: 15% 1fr 25%;
  grid-template-rows: 1fr; /* For as many rows as you need */
  grid-gap: 10px;
  border: 2px solid #222;
  box-sizing: border-box;
}</code>

結果:

---------------------------------------------
|     col 1             |      col 3        |
|                       |                   |
---------------------------------------------
|                     col 2                 |
---------------------------------------------

このソリューションは、プリプロセッサに頼らずに列の順序を変更するための便利で堅牢なアプローチを提供します。 .

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