CSS Grid入門 – レイアウトを制する新たな武器

こんにちは、フローです。

今回は、近年注目を集めているCSSの新機能、

「CSS Grid」について詳しく解説します。

ウェブサイトのレイアウトを自由自在に設計するための強力なツールです。

今回は、以下のHTMLとCSSを用いたサンプルコードを元に解説を進めていきます。

CSS Gridとは

2次元（行と列）のレイアウトシステムを提供するCSSのモジュールです。

フレキシブルなボックス（Flexbox）は

主に1次元（行または列）のレイアウトに使用されますが、

Gridは行と列の両方を同時に操作できるのが特徴です。

これにより、Webページのレイアウト設計が大幅に簡単になります。

HTMLの例

<div class="container">
  <div class="header">ヘッダー</div>
  <div class="sidebar">サイドバー</div>
  <div class="content">
    <div class="item1">アイテム1</div>
    <div class="item2">アイテム2</div>
    <div class="item3">アイテム3</div>
    <div class="item4">アイテム4</div>
  </div>
  <div class="footer">フッター</div>
</div>

CSSの例

.container {
  display: grid;
  grid-template-rows: 200px 3800px 800px;
  grid-template-columns: 1fr 2fr;
  grid-gap: 10px;
  grid-template-areas: 
    "header header"
    "sidebar content"
    "footer footer";
  height: 5000px;
}

.header { 
  grid-area: header; 
  background-color: #FFB448;
}

.sidebar { 
  grid-area: sidebar; 
  background-color: #056676;
  height: 100%;
}

.content { 
  grid-area: content; 
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  background-color: #6C7A89;
}

.footer { 
  grid-area: footer; 
  background-color: #BFBFBF;
}

.item1, .item2, .item3, .item4 { 
  background-color: #D1DBBD;
  border: 2px solid #056676;
}

CSS Gridの基本的なプロパティ

まず親要素にdisplay: grid;を指定します。

これにより、その子要素はグリッドアイテムとなります。

その上で、

以下のようなプロパティを利用してレイアウトを制御します。

grid-template-rowsとgrid-template-columns

これらのプロパティは、グリッドの行と列の大きさを定義します。

たとえば、

grid-template-rows: 200px 3800px 800px;は、

3つの行の高さをそれぞれ200px、3800px、800pxに設定します。

grid-gap

これは行と列の間隔（ギャップ）を定義します。

grid-gap: 10px;は、行と列の間隔を10pxに設定します。

grid-template-areas

これは名前付きのグリッドエリアを定義し、

そのレイアウトを設定します。

エリアはASCIIアートのような形でレイアウトを視覚的に表現します。

グリッドエリアについて

grid-template-areasプロパティは、

グリッドレイアウトを視覚的に表現する素晴らしい方法です。

上記の例では、ヘッダー、サイドバー、コンテンツ、フッターの4つのエリアを作成しました。

それぞれのエリアには名前が付けられており、

grid-areaプロパティを使用してそれぞれのHTML要素に割り当てられます。

グリッドアイテムのサイズ調整

CSS Gridでは、

grid-template-rowsやgrid-template-columnsプロパティを使用して、

グリッドアイテムのサイズを制御することが可能です。

また、fr単位を使用することで、

利用可能なスペースに対する比率を指定することもできます。

これにより、アイテム間でスペースを均等に分割したり、

特定のアイテムに大きなスペースを確保したりできます。

まとめ

以上、CSS Gridの基本的な使い方を解説しました。

一見複雑に見えますが、

一度理解してしまえばウェブページのレイアウトを自在に操ることができます。

一歩一歩、少しずつ試してみてください。

そして自由なレイアウト表現を楽しんでください。

この記事がCSS Gridの理解と利用の手助けとなれば幸いです。

レッツチャレンジ！