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

CSS

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;
  }
}