puyokura's tech blog
About
Tags

CSS Grid Layoutを使いこなす

2025年08月03日

CSS Grid Layoutは、Flexboxが1次元のレイアウトシステムであるのに対し、2次元(行と列)のレイアウトを扱うための強力なシステムです。

Gridの基本

Gridレイアウトを始めるには、コンテナ要素にdisplay: gridを設定します。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 80px 200px;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

この例では、3列のグリッドが作成されます。grid-template-columnsで行のサイズ、grid-template-rowsで列のサイズ、gapでアイテム間の間隔を指定します。

Gridは複雑なWebページのレイアウトを、より直感的かつ堅牢に構築するための現代的な解決策です。

About

技術的な知見や備忘録を公開するブログ。