以下に、CSS グリッドの列の並べ替えという中心的なテーマに焦点を当てた、質問ベースの記事のタイトルをいくつか示します。 短くてパンチのある: * CSS グリッドの列を再配置する方法: 4 つの強力な技術

CSS グリッドの列の並べ替え

CSS グリッドを使用する場合、特に適応する場合に列の順序を並べ替える必要が生じることがあります。さまざまなデバイス用のレイアウト。この記事では、この柔軟性を実現する 4 つの方法について説明します。

1. Grid-template-areas

このプロパティを使用すると、名前付きグリッド領域を定義し、それらの領域にグリッド項目を割り当てることができます。テンプレート内の領域の順序を変更することで、列の順序も制御できます。

2.ラインベースの配置

CSS グリッドは、アイテムがグリッド ラインに沿って順番に配置されるラインベースの配置もサポートしています。ソース コード内の項目の順序によって、グリッド内の項目の位置が決まります。

3. order プロパティ

order プロパティは、グリッド セル内の項目の順序を指定します。アイテムに異なる順序値を割り当てることで、ソースの順序に影響を与えることなく、グリッド内でのアイテムの配置を制御できます。

4. Grid-auto-flow の高密度関数

grid-auto-flow の高密度関数を使用すると、空のグリッド セルを防ぐことができます。列にまたがる項目と組み合わせると、この関数は他のグリッド項目を使用可能な空のセルに効果的に移動します。

例

dense 関数を使用すると、次のような列:

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

これにより、次のモバイル レイアウトが生成されます:

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

以上が以下に、CSS グリッドの列の並べ替えという中心的なテーマに焦点を当てた、質問ベースの記事のタイトルをいくつか示します。 短くてパンチのある: * CSS グリッドの列を再配置する方法: 4 つの強力な技術の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。