grid – ふろんとこーど

display: grid;を使おうとすると、「あれ？columns,row？なんだっけ」ってなるのでミニマムな備忘録。 基本 display: grid; ... グリッドコンテナーの宣言 grid-template-columns ... 列を追加 grid-template-rows ... 行を追加 grid-column-gap ... 列の間の余白をとる grid-row-gap ... 行の間の余白をとる Gridパターンメモ ３カラム均等幅 display: grid; grid-template-columns: repeat(3, 1fr); 2行３列（１行目１００px、２行目２００px） display: grid; grid-template-columns: 1fr 1fr 1fr; // 列の指定 grid-template-rows: 100px 200px; // 行の指定 3行1列(grid-template-areasで並び順変更) .content { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "area3" "area2" "area1"; .content-item1 { grid-area: area1; } .content-item2 { grid-area: area2; } .content-item3 { grid-area: area3; } }

ミニマムで理解するグリッドレイアウト