要素を2列に並べるカラムレイアウトの実装
grid
Box - A
Box - B
Box - C
Box - D
flex
Box - A
Box - B
Box - C
Box - D
カラム比率が2:1で２列に並ぶレイアウトの実装
grid
Box - A
Box - B
Box - C
Box - D
flex
Box - A
Box - B
Box - C
Box - D
複数要素をセンター寄せする記述の例
grid
Center
Lorem ipsum dolor sit amet.
flex
Center
Lorem ipsum dolor sit amet.
画像の上にカラーレイヤーとコンテンツを重ねて表示する
grid
Overlay Contents
absolute
Overlay Contents
4列×4行のグリッドに要素を配置する
A
B
C
D
名前付きグリッドエリアを使ってみる
Header
Main
Aside