CSSグリッドでコンテナを並べ替えするやり方

CSSグリッドレイアウトを使ってコンテナの表示の順番を並べ替える方法です。

サンプルのHTML & CSS

まずは土台となるHTMLとCSSはこちら。

<div class="grid">
  <div class="conA">conA</div>
  <div class="conB">conB</div>
  <div class="conC">conC</div>
  <div class="conD">conD</div>
</div>
.conA,
.conB,
.conC,
.conD {
  padding: 20px;
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}

.conA {
  background-color: red;
}

.conB {
  background-color: blue;
}

.conC {
  background-color: green;
}

.conD {
  background-color: black;
}
サンプルとなるHTMLの表示結果
これをCSSグリッドで並べ替えてみます。

CSSグリッドで並べ替える

これをCSSグリッドを用いて並べ替えてみましょう。

.grid {
  display: grid;
  grid-template-rows: auto auto auto auto;
}

.conA {
  grid-row-start: 4;
}

.conB {
  grid-row-start: 3;
}

.conC {
  grid-row-start: 2;
}

.conD {
  grid-row-start: 1;
}

行にグリッドラインを指定し、ライン番号の数字で配置して並べ替えることができます。

CSSグリッドで並べ替えを行った表示結果
数字の順番に並び変わりました

行だけでなく列もラインを設定することで配置してあげることができるため、CSSグリッドでいろんなデザインがつくることが可能になりますね。