タイル型のレイアウトを作る方法を説明していきます。
CSSグリッド
flexboxと同じように、親要素のコンテナと子要素のアイテムを作成します。
「display：grid」を記述して開始します。
CSS
.container{
desplay:grid;
}
HTML
<div class=”container”>
<div>アイテム①</div>
<div>アイテム②</div>
<div>アイテム③</div>
>/div
grid-template-columns
grid-template-columnsは、各グリッドアイテムの幅を指定して横並びに出来ます。
例えば、1列に3つのグリッドアイテムを、各200pxずつ並べる場合、
.container{
display:drid;
grid-template-columns:200px 200px 200px;
}
しかし、このままでは見ずらいので、次の「gap」プロパティを使います。
gap
gapは、グリッドアイテムの間に余白をつけてくれます。
上下左右の端は親要素であるグリッドコンテナの枠に揃います。
.container{
display:grid;
grid-template-columns:200px 200px 200px;
gap:10px;
}
fr
これまでの例で、grid-template-columnsにpxレベルで指定していましたが、frを使えば比率（画面の幅に合わせて自動伸縮）で指定してあげることが出来ます。
.container{
display:grid;
grid-template-conlumns:1fr 1fr 1fr;
gap:10px;
}
grid-template-rows
grid-template-rowsは、グリッドアイテムの高さを指定することが出来ます。
例えば、2行とも200pxにしたい場合、
.container{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:10px;
grid-template-rows:200px 200px;
}
コメント