こんにちは!のせっち@nosecchi01です。
恥ずかしながらコンテンツのレイアウト組みはflexbox一辺倒でやってきました。
しかし、gridを使うとflexboxではできないレイアウトを組むことができると知りました。
特に、PC/SPでコンテンツ順が入れ替わっているレイアウトに有効です。
flexboxだと2回htmlを書かないといけないレイアウト
今回は例題として、下記のようなレイアウトを考えてみます。
flexboxだとhtmlを2回書かないと組めないレイアウトです。
(1と3を一つにしたコンテンツを書いておいて、PC、SPで表示非表示しないといけないですね。)
flexboxしか知らなかった頃の僕は、デザイナーさんを恨むばかりでしたが、自分の技術不足だったことに気がつきました。
gridを使えばこう組める
See the Pen Untitled by Yuki Nose (@yukinouz1) on CodePen.
上記のcodepenではメディアクエリを書いているので、スマホでの閲覧の場合や、PCでの閲覧の場合でもコードを表示している状態では縦並びになります。
PCでResultのみ表示がオススメです。(デフォルトの状態)
<div class="grid">
<div class="grid__item item01">1</div>
<div class="grid__item item02">2</div>
<div class="grid__item item03">3</div>
</div>
HTMLはflexboxと同じ感覚で、親・子構造として、親にdisplay: grid
としてあげればOKですね。
// gridに関わる部分のみ抜粋
.grid {
display: grid;
column-gap: 30px;
}
.grid__item {
height: 200px;
width: 100%;
}
.item02 {
@media only screen and (min-width: 768px) {
height: 100%;
grid-column-end: 3;
grid-column-start: 2;
grid-row-end: 3;
grid-row-start: 1;
}
}
cssはgridに関わる部分のみを抜粋しました。
ポイントは.item02
に書いた部分です。具体的には下記です。
// 更に抜粋
.item02 {
grid-column-end: 3;
grid-column-start: 2;
grid-row-end: 3;
grid-row-start: 1;
}
}
gridは「縦横2軸で」、「何をどこに配置するかを決めることができる」ということを覚えておいてください。
grid-column
とgrid-row
で縦横の配置を決めています。
図のように考えて、始点(start)、終点(end)でどのくらい領域を確保するのか?と考えるとわかりやすいです。
特にflexboxでは2(青)の要素を縦方向にぶち抜くことができないので、こうしたレイアウトにgridは重宝します。→( gird-row-start: 1
、grid-row-end: 3
で縦方向を全領域確保しています。)