GridLayoutで楽しくレイアウトを決める！-1-
▼はじめに
駆け出しエンジニアと名乗るのならば、やっぱりコーディングはできた方がいいよなあ。。
と思いつつ、今まで避けてきました。
コーディングは難しい。。
しかし、けっこう需要ありますし、アートをやっているようで楽しそうでもあります。
そんな中、今回は、グリッドレイアウトを勉強してみたいと思います。
▼なぜやるのか？
・簡単に綺麗なレイアウトを組めるようになりたいから
・割と新し目な技術だから
・flexboxで計算したりするのがちょっと面倒になってきたから
▼なにをやるのか？
・GridLayoutをなんとなく使えるようにする
・チュートリアルに目を通す
▼どうやるのか？
・チュートリアルをやる
▼実装
・まずはサイトを確認
mozilaさんのサイトにお世話になります。
・index.htmlとstyle.cssを作る
ベースになるファイルを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>GridLayout</title>
</head>
<body>
</body>
</html>・とりあえずコピペ
チュートリアルほぼそのまま。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>GridLayout</title>
</head>
<body>
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
</body>
</html>.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 3;
grid-row: 1;
background-color: aqua;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
background-color: burlywood;
opacity: 50%;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
background-color: darkgoldenrod;
}
.four {
grid-column: 3;
grid-row: 3;
background-color: hotpink;
}
.five {
grid-column: 2;
grid-row: 4;
background-color: lime;
}
.six {
grid-column: 3;
grid-row: 4;
background-color: salmon;
}
おおおお！！！
これはすごいぞ！！！
普通にFlexboxなどで組んだら、めちゃめちゃ大変じゃないかなあ。
・基本的なGridLayoutの使い方
まずは、cssに何も書かないで、div要素で文字列を囲んだだけの状態にする。
こうなる。
GridLayoutを適用させる。
.wrapper {
display: grid;
}
見た目は変わらず。
grid-template-columnsを足してみる。
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
}
おお！ カラムが2列になったぞ！
（わかりづらいので、背景色をつけています）
どうやら、左上から指定した列だけ右に配置され、終点になったら左に戻る、という順番みたい。
オプションを 1fr とすると、親要素のコンテンツ幅いっぱいに要素を配置するようです。
ちょっと実験してみましょうか。
body {
max-width: 500px;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
}
むむ、、bodyの幅を超えてしまったぞ。。
もうちょい実験してみましょうか。
.wrapper {
display: grid;
grid-template-columns: 1fr 300px 20%;
}
今回は、3列にしてみました。
左から、１フレーム、300px、20%と指定しています。
これではっきりしたのは、
・1frは、中身の要素によって可変する。（親要素には依存しない）
・ピクセル指定ができる
・%は、親要素に対しての割合に収まる
です。
1frがどれだけ長くても、%はきっちり、500pxの20%である100pxを維持しています。
ちょっと元に戻しつつ、今度は要素を７つまで増やします。
.wrapper {
display: grid;
grid-template-columns: 200px 200px 200px;
}
このように、とにかくグリッド状に要素を順番に配置したい、というニーズには、簡単に答えてくれそうです。
ここでふと思ったのが、「スマホ対応が簡単にできそう」ということです。
また実験してみましょう。
/* 721px以上は3列 */
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/* 401~720pxまでは2列 */
@media screen and (max-width: 720px) {
.wrapper {
grid-template-columns: 1fr 1fr;
}
}
/* ~400pxまでは1列 */
@media screen and (max-width: 400px) {
.wrapper {
grid-template-columns: 1fr;
}
} 
こいつはすごい！！
めちゃめちゃ簡単に、スマホ対応の画面が作れそうです！！
▼結果
GridLayoutは、とても柔軟で、簡単にレイアウトができそうです。
なかなかに奥深いので、これは引き続きの連載勉強としたいと思います。
今度コーディングする時には、ぜひ使ってみたいですね！
この記事が参考になったら、シェア、好き、フォローをお願いします！