display: flex;も便利なCSSですが、display: grid;も覚えておきたいCSSです。
display: flex;よりプロパティが多い印象ですが、使えるようになるととても便利です。
gridのためのHTMLとCSS
まずはgridを効かせるHTMLとCSSは以下の通り。
display: grid;はgridさせたい要素を囲む必要があります。
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>そして、囲んだ要素にdisplay: grid;を指定します。
色はお好みの色にして下さい。
hslについてはこちら。
.container {
display: grid;
}
.box1 {
background: hsl(200, 100%, 50%);
}
.box2 {
background: hsl(230, 100%, 50%);
}
.box3 {
background: hsl(50, 100%, 50%);
}
.box4 {
background: hsl(100, 100%, 50%);
}
.box5 {
background: hsl(300, 100%, 50%);
}grid-columnとgrid-rows
個々のアイテムにかけます。
grid-column: 1/4 //1つの列から３つの列にまたがるマイナスを使えば１列全部になります。
grid-column: 1/ -1 //1列目から最後の列までgrid-rowも同様です。
grid-row: 1/ 4 //1行から３つの行にまたがるマイナスを使えば１行全部になります。
grid-column: 1/ -1 //1行目から最後の行までgrid-template-columnsとgrid-template-rows
親要素にかける
grid-template-columns: 100px 100px 100px; //3列
grid-template-rows: 100px 100px; //2行
grid-template-columns: repeat(4 , 100px); //100pxを４つ並べるデモはこちら。
See the Pen Untitled by J&SadaKo (@jandsadako) on CodePen.
See the Pen grid-template by J&SadaKo (@jandsadako) on CodePen.
frを使って可変させることができる
grid-template-columns: 100px 1fr 100px; //真ん中の要素を可変させる
grid-template-columns: 100px 2fr 1fr; //余白を2対１See the Pen grid-template by J&SadaKo (@jandsadako) on CodePen.
２つの違いが分かりにくいと思うので、左上のCODEPENをクリックして見比べてみて下さい。
上は１と３のdivが100pxで固定されますが、
下は２と３が２対１の幅で表示されます。
See the Pen grid-tamplate by J&SadaKo (@jandsadako) on CodePen.
gapの使い方
gapは余白を表します。
gap: 10px 20px;//縦の余白 横の余白auto-fillとauto-fit
grid-template-columns: repeat(auto-fill , 100px); // 親要素の幅に入る限り100pxの列を入れる
grid-template-columns: repeat(auto-fill , minmax(100px, 1fr));//列の幅を100pxから1frの間にする
grid-template-columns: repeat(auto-fit , minmax(100px, 1fr));//配置する要素がなくなったら横幅いっぱいに均等に配置auto-fillを使えば親要素の幅に入る限り100pxの列を入れることができます。
See the Pen Untitled by J&SadaKo (@jandsadako) on CodePen.
しかし、上の場合親要素の残りの幅が100px未満になったとき余白ができてしまします。
そこでminmax(100px, 1fr)で列の幅を100px以上1frの間に設定できます。
See the Pen grid-template by J&SadaKo (@jandsadako) on CodePen.
auto-fillでは配置する要素がなくなった場合に余白ができます。
そこで、auto-fitを使えば配置する要素がなくなった場合にも横幅いっぱいに均等に配置させることができます。
こちらも左上のCODEPENをクリックして見比べてみて下さい。
See the Pen grid-template by J&SadaKo (@jandsadako) on CodePen.
grid-auto-rows
ここまでは行をgrid-rows: 100px 100px;で指定してきましたが、
何行になるか分からない場合にgrid-auto-rowsを使うと便利です。
grid-auto-rows: 100px;//何行になるか分からない場合や全て100pxの高さに指定する場合、定義されていない行ができた場合の行の高さを指定grid-column、grid-rowの書き方
ここからは子要素の配置場所を指定する方法です。
行はgrid-row: 2;を指定します。
緑の場所の列を示すには下のいずれかの方法で書くことができます。
grid-column: 2 /4; //2から４
grid-column: 2/ span 2; //上に同じ
grid-column: 2 /-1; //上に同じSee the Pen grid by J&SadaKo (@jandsadako) on CodePen.
grid-auto-flow
grid-auto-flowやgrid-auto-columnsや大きさの異なる要素を並べる時に便利です。
grid-auto-flow: row;//デフォルト
grid-auto-flow: column;//列で並べる
grid-auto-columns: 100px;//grid外の列の幅を指定
grid-auto-flow: column dense;//隙間を埋める要素の位置を指定する方法
//gridの親要素を揃える(親要素に指定)
justify-content:start(end, center, space-between); //列
align-content:start(end, center, space-between);//行
//grid内の要素を揃える （親要素に指定）
justify-items: start(end, center);//列
align-items: start(end, center)//行
//個々の要素で揃える (子要素に指定)
justify-self: start(end, center);//列
align-self: start(end, center);//行