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;
}

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グリッドでいろんなデザインがつくることが可能になりますね。