• Home
  • Web制作
  • CSSグリッドレイアウトを使いこなそう！コンテナプロパティ徹底解説

CSSグリッドレイアウトを使いこなそう！コンテナプロパティ徹底解説

schedule update
Tags: CSS

CSSグリッドレイアウト：コンテナプロパティで思い通りのレイアウトを実現

Webサイト制作において、要素を思い通りに配置することは、デザイン性と使いやすさを両立させる上で非常に重要です。従来のフロートやポジショニングによるレイアウトは、複雑化しやすく、レスポンシブ対応にも手間がかかっていました。

そこで登場したのが、CSSグリッドレイアウトです。

CSSグリッドレイアウトとは？

CSSグリッドレイアウトは、ページを「行」と「列」からなるグリッド（格子状）に分割し、その中に要素を配置していくレイアウト手法のこと。従来の手法に比べて、より直感的かつ柔軟にレイアウトを構築できます。

グリッドレイアウトの要！コンテナプロパティ

グリッドレイアウトを適用するには、まずグリッドの土台となる「グリッドコンテナ」を作成する必要があります。このグリッドコンテナには、グリッド全体の構造や振る舞いを制御するための、様々なプロパティが用意されています。これらのプロパティを理解することが、グリッドレイアウトをマスターする第一歩と言えるでしょう。

今回は、数あるコンテナプロパティの中から、特に重要なものをピックアップして解説していきます。

あわせて読みたい
ウェブページの構成が思いのままに！display: grid を用いた柔軟な配置手法を基礎から学ぶ

必須項目！displayプロパティでグリッドを宣言

displayプロパティは、要素をどのように表示するかを指定する際に用いるプロパティです。グリッドレイアウトを使用する場合は、グリッドコンテナとなる要素に対して、display: grid; と指定する必要があります。

記述例

.container {
  display: grid; 
}

行と列のサイズを指定する

グリッドレイアウトでは、行と列のサイズを指定することで、グリッドの構造を定義します。

grid-template-rows プロパティ：行の高さを指定

grid-template-rows プロパティは、グリッドの各行の高さを指定するために使用します。

記述例

.container {
  display: grid;
  grid-template-rows: 100px 200px; /* 1行目は100px、2行目は200px */
}

grid-template-columns プロパティ：列の幅を指定

grid-template-columns プロパティは、グリッドの各列の幅を指定するために使用します。

記述例

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 1列目は1fr、2列目は2fr */
}

fr（fractional unit）について

fr は、グリッドコンテナの空き領域を分割する際に使用される単位です。上記の例では、空き領域を3分割し、1列目に1/3、2列目に2/3の幅を割り当てています。

グリッド間の余白を調整する

gap プロパティ：行と列の間隔を一括指定

gap プロパティは、行と列の間隔（ガター）を一括で指定するために使用します。

記述例

.container {
  display: grid;
  gap: 20px; /* 行と列の間隔を20pxに設定 */
}

row-gap プロパティ：行間の間隔を指定

row-gap プロパティは、行の間隔のみを指定するために使用します。

記述例

.container {
  display: grid;
  row-gap: 30px; /* 行間の間隔を30pxに設定 */
}

column-gap プロパティ：列間の幅を指定

column-gap プロパティは、列の間隔のみを指定するために使用します。

記述例

.container {
  display: grid;
  column-gap: 40px; /* 列間の幅を40pxに設定 */
}

まとめ：コンテナプロパティを理解してグリッドレイアウトを自在に操ろう

今回は、CSSグリッドレイアウトの基礎とコンテナプロパティについて解説しました。今回ご紹介したプロパティ以外にも、グリッドレイアウトには、様々な機能が用意されています。これらの機能を使いこなすことで、より複雑で洗練されたレイアウトを実現することが可能です。

関連記事