【CSS】CSSグリッドについて

記事概要

CSSグリッドについて、まとめる。

CSSグリッド(タイル型レイアウト)とは

壁にタイルを敷き詰めるように、同じ大きさのボックスを等しい間隔で並べるレイアウト

画面やテキストなどの多くの情報を整理して一度に見せられるため、散らかった印象ではなく、整った印象になる

グリッドライン

行・列の境界線であり、grid-columnプロパティやgrid-rowプロパティで指定する数値は下記を参照

/* 左上の要素に対して適用 */
.hoge {
  /* 横幅をグリッドライン1~3番目に指定 */
  grid-column: 1 / 3;
  /* 縦幅をグリッドライン1~3番目に指定 */
  grid-row: 1 / 3;
}

レイアウト設定

grid-template-columnsプロパティ

display: grid;と併せて設定し、子要素における横方向の並べ方を設定する

/* 1列に4つのグリッドアイテムを並べる */
.hoge {
  display: grid;
  grid-template-columns: 30px 30px 40px 30px;
}

• repeat関数
  repeat(繰り返す数, 要素の幅)と記述することで、同じ数値が並ぶ時にスッキリとまとまる

  /* 1列に6つのグリッドアイテムを並べる */
  .hoge {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
  
  /* 1列に6つのグリッドアイテムを並べる */
  .hoge {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
  

• minmax
  minmax(最小値, 最大値)と記述することで、要素の幅に最小値と最大値を指定する

  /* 要素の幅が120pxよりも小さくならず、1frよりも大きくならない */
  .hoge {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
  }
  

• aut-fit
  1列の要素数を指定せず、画面の幅に合わせて要素を折り返して次の行に表示させる

  /* 画面の幅に合わせて要素を折り返す */
  .hoge {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  

grid-template-rowsプロパティ

display: grid;と併せて設定し、子要素における縦方向の並べ方を設定する

/* 1行に3つのグリッドアイテムを並べる */
.hoge {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 1fr;
  grid-template-rows: 30px 40px 30px;
  gap: 5px;
}

grid-columnプロパティ

grid-column: 始まりのライン / 終わりのライン;と記述することで、横の範囲をグリッドライン単位で指定する

/* 左上の要素に対して適用 */
.hoge {
  grid-column: 1 / 3;
}

grid-rowプロパティ

grid-row: 始まりのライン / 終わりのライン;と記述することで、縦の範囲をグリッドライン単位で指定する

/* 左上の要素に対して適用 */
.hoge {
  grid-row: 1 / 3;
}

gapプロパティ

display: grid;と併せて設定し、子要素同士の間に余白を設定する

/* グリッドアイテム同士の間に余白5pxを設定する */
.hoge {
  display: grid;
  grid-template-columns: 30px 30px 40px 30px;
  gap: 5px;
}

単位

fr

親要素から見た子要素の大きさを割合で指定する

/* 1:1:2:1の割合でグリッドアイテムを表示する */
.hoge {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 1fr;
  gap: 5px;
}

2カラムレイアウト

横幅の設定は自由だが、下記が多い
メインエリア：サイドバー = 2：1
メインエリア：サイドバー = 3：1

1:1の場合、スプリットスクリーンと呼ぶ