グリッドレイアウトの基本特性と列テンプレート
グリッドレイアウトの基本
3列、均等幅のグリッド。最初に列数、列幅をテンプレートとして設定する。
.col3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
One
Two
Three
Four
Five
横に並ぶグリッドアイテムの高さは自動的に揃う
One
Two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nunc leo, pulvinar sit amet sapien vel, tempus porta purus.
Three
Four
Five
列テンプレートの設定方法
列の幅を変える
2列。右列の幅は左列の2倍。
grid-template-columns: 1fr 2fr;
One
Two
Three
Four
Five
一部の列幅を固定
左列を300pxに固定、右列は自動。
grid-template-columns: 300px auto;
One
Two
一部の列幅を固定、残りを均等幅に
1列目を50pxに固定、2列目、3列目は1fr。
grid-template-columns: 50px 1fr 1fr;