Grid Layout とは
格子状のマス目をベースとしてレイアウトを組むときに使うもの。
似ているもので「Flexbox」があります。
Flexbox との違い
Flexboxは一方方向でのレイアウトに対して、Grid Layout は縦横自在にレイアウトできます。
要素の追加には向いていないものなので、要素の増減があるものには向いていません。
例）追加する可能性があるナビには向いていません。
基礎的な書き方
CSSに「display:grid」と記載します。
HTML
<!--コンテナ-->
<div class="container">
<!--アイテム-->
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
</div>CSS
.container {
display: grid; /*「Container」を「Grid Layout」に指定*/
}幅・高さを指定
列と行の個数を決めるものには
grid-template-columns（列トラックの幅を指定）
grid-template-rows（行トラックの高さを指定）
があります。
grid-template-columns（列トラックの幅を指定）
px fr auto を使って幅を決めることができます。
.container {
display: grid;
grid-template-columns: 200px 200px 200px; /*200pxの列トラックを3列表示させる*/
}例のように、3列以上アイテムがある場合は、自動的に改行されます。
レスポンシブデザインをするなら「fr」をいれる
コンテナの幅に合わせて、自動的に分割して列を表示できるものです。
わかりやすい図があったのでお借りしました。（zero-plus media 様）
.container {
display: grid;
width: 600px; /*コンテナ幅を600pxに指定*/
grid-template-columns:1fr 2fr 1fr; /*2列目のトラック幅を2frに変更*/
}600pxを3分割するのに、1つを2倍にして表示されています。
px と組み合わせて表記することも可能です。
.container {
display: grid;
width: 600px;
grid-template-columns: 300px 1fr 1fr;
}コンテナの幅を「％」にすると、どの端末でもブラウザの幅に合わせて変化させることができます。
grid-template-rows（行トラックの高さを指定）
行トラックの高さと表示させる行トラック数を指定することができます。
.container {
display: grid;
width: 600px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 150px 130px;/*一行目のトラックを「150px」二行目のトラックを「130px」にしてい*/
}gap（余白）
グリッド間の余白を指定できます。
.container {
display: grid;
height: 300px;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 1fr 1fr;
gap: 10px;
}上記例だと、縦横に要素の間の余白が10pxあるという意味になります。
縦横別にしたい場合は、
「gap: 10px(縦) 20px(横);」
と記述します。
repeat()関数
repeat()は、
repeat（繰り返しの回数,繰り返す値）で表記します。
auto-fit
横幅に入るだけ配置するというもの
要素が少ないときは枠を埋めないように指示ができます。
repeat(auto-fit, 22%); など
minmax(250px, 1fr)
minmax(最小値, 最大値)で表記します。
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));justify-content: center;
「justify-content: center; 」は、全体を真ん中寄せにできます。
参考サイト
わかりやすかったサイト様です。
コメント