CSS Grid入門：2次元レイアウトを直感的に作る方法

CSS Grid入門：2次元レイアウトを直感的に作る方法

CSS Gridとは？

CSS Gridは、Webページのレイアウトを2次元的（縦・横）にコントロールできる強力なレイアウトシステムです。従来のフロートやFlexboxでは難しかった複雑なレイアウトを、簡潔なコードで実現できます。

基本構造

CSS Gridは、親要素をグリッドコンテナ、その中の要素をグリッドアイテムと呼びます。

HTML
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
CSS
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 50px 50px;
  gap: 10px;
}

.grid-container div {
  background: #4cafef;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

主要プロパティ一覧

コンテナに使うプロパティ

プロパティ説明例
displaygrid または inline-grid に設定display: grid;
grid-template-columns列の幅を指定grid-template-columns: 200px auto 1fr;
grid-template-rows行の高さを指定grid-template-rows: 100px auto;
gapグリッドアイテム間の隙間gap: 10px;
justify-items水平方向の配置justify-items: center;
align-items垂直方向の配置align-items: start;
grid-template-areas名前付き領域の定義 
grid-template-areas:
"header header"
"sidebar main";

アイテムに使うプロパティ

プロパティ説明例
grid-column列の開始と終了位置grid-column: 1 / 3;
grid-row行の開始と終了位置grid-row: 1 / 2;
grid-area領域名または位置指定grid-area: header;

実践例：3カラムレイアウト

HTML
<div class="grid-3col">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main</main>
  <footer>Footer</footer>
</div>
CSS
.grid-3col {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  gap: 10px;
}

header { grid-area: header; background: #4cafef; }
nav { grid-area: nav; background: #8bc34a; }
main { grid-area: main; background: #ffc107; }
footer { grid-area: footer; background: #9c27b0; }

.grid-3col > * {
  padding: 20px;
  color: white;
}

まとめ

CSS Gridは、従来のレイアウト方法と比較して格段に柔軟で、複雑な2次元レイアウトを直感的に作成できます。Flexboxと併用することで、さらに強力なレスポンシブデザインが可能になります。

PAGE TOP