CSS グリッド列の再配置

はじめに

CSS グリッドは、Web コンテンツの順序や位置を制御する機能など、Web コンテンツに柔軟なレイアウト システムを提供します。列。この質問では、CSS グリッド内の列の順序の変更について詳しく説明します。

Grid-template-areas プロパティ

グリッド列を再配置する方法の 1 つは、grid-template-areas プロパティを使用することです。これにより、グリッド内の特定の領域を定義し、それらの領域に列を割り当てることができます。例:

.my-grid {
  grid-template-areas:
    "col3 col1"
    "col3 col2";
}

これにより、col3 要素が行の先頭に移動し、その後にcol1 要素が移動します。

ラインベースの配置

ラインベースの配置を使用することもできます。列の順序を制御します。これには、開始位置と終了位置を決定する「grid-column-start」プロパティと「grid-column-end」プロパティを使用して、グリッド線に沿ってグリッド項目を次々に配置することが含まれます。 Col1要素の後のcol3要素:

.col3 {
  grid-column-start: 2;
}

order プロパティは、トラック内のグリッド項目の順序を設定します。 0 より小さい値はトラックの開始前に項目を配置し、0 より大きい値はトラックの終了の後に項目を配置します。

col3 要素を最初の位置に移動するには:

.col3 {
  order: -1;
}

grid-auto-flow プロパティの dense 関数を使用して、グリッド列を再配置することもできます。空のグリッド セルをスキップして、グリッド コンテナーの先頭から開始して、利用可能なスペースに項目を配置します。

col3 要素を 2 行目の先頭に移動するには:

.my-grid {
  grid-auto-flow: dense 1fr;
}
.col3 {
  grid-column: 3;
  grid-row: 2;
}