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