CSS Grid
要素に対してdisplay: gridか display: inline-gridを指定するとその要素はグリッドコンテナーになり、全ての直接の子要素はグリッドアイテムになる
code:html
<div class="container">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
code:css
.container {
display: grid;
}
ただし、これだけだと1カラムにしかならないので、grid-template-columnsも追加する
code:css
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
これで伸縮する3等分のカラムになる
レスポンシブにするような、何列か固定にせず幅に合わせて折り返す時はauto-fitが使える
code:css
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-columnsでは列トラックのサイズを定義している
トラックとはグリッドの行と列のこと。行トラック 列トラック
二本の線の間にあるスペースという、わかりにくい説明もされる
横線二本に挟まれてれば行トラック、縦線二本に挟まれてる列トラック
代替としてはこういうのがある