gridレイアウトについて
普段使うことも多いgridレイアウトですが、その都度調べながら使っているな〜と感じたのでまとめてみます。
MDN Web Docによると
グリットとは、行と列を定義する垂直線と水平線が交差したものです。要素をグリッドの行と列の中に配置することができます。
定義だけ見てもよく分かりませんでした。
実際に使ってみます。
div要素の中にdivを５つ生成。
<div class="wrapper">
<div class="childlen">1</div>
<div class="childlen">2</div>
<div class="childlen">3</div>
<div class="childlen">4</div>
<div class="childlen">5</div>
<div class="childlen">6</div>
</div>
.childlen {
background-color: #b7ecff;
border: 1px solid #fff;
width: 100%;
height: 100px;
}
↓表示は下記の通り。何も指定していないので要素が縦に並びます。
親要素にdisplay:grid;を適用してみます。
.childlen {
background-color: #b7ecff;
border: 1px solid #fff;
width: 100px;
height: 100px;
}
.wrapper {
display: grid;
}
何も変わっていない・・・？
ディベロッパーツールでみると、行が出来ていることが確認できます。
ただ、display: grid;の指定だけでは見た目にレイアウトに変化はありません。
grid-template-columnsの指定
grid-template-columnsを指定することにより、列の指定ができます。
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px; /* 追加 */
}
grid-template-columnsを指定することで列が作成されました。
100pxの列を３つ作成されています。
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px 100px; /* 追加 */
}
指定を増やすことで列が増えていきます。
grid-template-columnsを指定することで列が作成できることが分かりました。
列の幅は固定ではなく画面サイズに合わせて変更したい時に使うのがfr です。
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
fr指定をすることで、画面の横幅の1/3の幅の列を作成することができました。
frとはfraction(比率)の略です。1fr 1fr 1frとは1:1:1の比率での指定を意味します。
↓grid-template-columns: 2fr 1fr 1fr;
また、pxの固定値と比率を組み合わせて使うこともできます。
.wrapper {
display: grid;
grid-template-columns: 200px 1fr 1fr;
}
一番左の列が200px固定になりました。残りの横幅が１対１になっていることが分かります。
repeatとの組み合わせ
先ほどのgrid-template-columns: 1fr 1fr 1fr;は下記のように書き換えることができます。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
repeat(繰り返し回数, 比率)のように記述することで、
スッキリと記述することができます。
また、固定値と組み合わせて下記のように使用もできます。
.wrapper {
display: grid;
grid-template-columns: 200px repeat(4, 1fr) 400px;
}
1番目の要素が200x、６番目の要素が400px、２番目から５番目の要素が均等幅になりました。
grid-template-rowsの指定
列の指定の次は行の指定です。
.childlen {
background-color: #b7ecff;
border: 1px solid #fff;
width: 100%;
height: 100%; /* 高さを100%に変更 */
}
.wrapper {
display: grid;
grid-template-rows: 100px 100px 100px; /* 変更 */
}
1~3番目の要素は100pxになり、100pxの行が３つ作成されていることが分かります。
こちらも、repeat()が使用できます。
.childlen {
background-color: #b7ecff;
border: 1px solid #fff;
width: 100%;
height: 100%; /* 高さを100%に変更 */
}
.wrapper {
display: grid;
grid-template-rows: repeat(3, 100px);
}
比率指定をしてみます。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
均等な行が作成されましたが、高さ指定をしていないのでコンテンツの内容物の高さになっています。
高さを一括指定する場合に使用できるのがgrid-auto-rowsです。
.wrapper {
display: grid;
grid-auto-rows: 80px;
}
各要素が80pxになりました。
grid-template-rowsとgrid-template-columnsの組み合わせ
grid-template-rowsとgrid-template-columnsを指定することで２×３の表が簡単に作成できます。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);
}
最後に
ここまでgridレイアウトの基本を見てきました。
次回は要素の配置について書いていこうと思います。