css grid【CSS入門】Gridレイアウトで自由自在に要素を配置する

CSSでレイアウトを調整する方法は様々です。
その中の１つに、CSS Grid Layoutという機能があります。

CSS Grid Layoutは、2次元レイアウトを簡単かつ自在に表示することができる便利な機能です。
Flexboxなどではつくるのが難しいデザインも、柔軟に調整することができます。

今回は、Grid Layoutの基本的な使い方から、様々な応用方法まで詳しく解説していきたいと思います。

CSS Gridとは？

CSS Grid Layout (グリッドレイアウト) は、レイアウトを構築するためのCSSの機能の１つです。

デザインする画面を水平線と垂直線で分断し、それによってできる格子状のマス目 (グリッド) をベースにレイアウトを組むデザイン手法のことをグリッドレイアウトと呼び、これをCSSによって実現できるようにしたものが CSS Grid Layout です。

同じく CSSでレイアウトを調整する方法の１つに、 Flexboxを使用する方法がありますが、基本的に縦もしくは横の一方向に対してのみ調整を行う Flexboxに対し、Grid Layoutは縦横両方を自在に調整できるのが特徴です。

これにより、Flexboxを使用するよりも簡潔なコードで、複雑なレイアウトに対応することができます。

Gridレイアウトの使い方

それではさっそく、Grid Layoutの使い方について見ていきましょう。
まずは、基本的な使い方から順に解説していきます。

基本構文と使い方

Grid Layoutは、レイアウト全体を囲む要素である 「グリッドコンテナ」 と、その中に子要素として配置する 「グリッドアイテム」 で構成されます。

例えば以下のように、グリッド上に配置したい要素全てを、１つのグループとして親要素 (グリッドコンテナ) で囲うような形式で、HTMLを記述します。

<div class="container">
  <div class="itemA">A</div>
  <div class="itemB">B</div>
  <div class="itemC">C</div>
</div>

そして、グリッドコンテナに対し、displayプロパティで 「grid」 もしくは 「inline-grid」 を指定します。

.container {
  display: grid;
}

これにより、指定したグリッドコンテナ内に記述したアイテムを、Grid Layoutで調整することができるようになります。
Grid Layoutを使用する上で必須の記述は、この２点のみです。

ただし、これだけではまだ要素を並べただけに過ぎないので、ここから各要素の配置やサイズをグリッドをベースに調整していきます。

要素の高さや幅、間隔を自動で設定する

まずは、各要素の高さや幅、要素同士の間隔などを調整してみましょう。
グリッドアイテムのサイズは、縦横それぞれのグリッドトラックの大きさを基準に設定されます。

グリッドトラックとは、いわゆる行や列のことを指します。
レイアウト画面を分断する水平線、もしくは垂直線 (グリッドライン) 同士に挟まれた空間のことを、グリッドトラックと呼びます。

グリッドトラックの大きさの指定は、以下のプロパティを使用して行います。

・grid-template-rows ： 行ごとの高さを指定
・grid-template-columns ： 列ごとの幅を指定

指定の際は、各アイテムを並べるのに必要なグリッドトラックの数だけ、半角スペースで区切ってサイズを指定します。

【HTMLの記載例】

<div class="container">
  <div class="item itemA">A</div>
  <div class="item itemB">B</div>
  <div class="item itemC">C</div>
</div>

【CSSの記載例】

.container {
  display: grid;
  grid-template-rows: 50px 100px 50px;
  grid-template-columns: 100%;
}

.item{
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding: 10px;
}

.itemA {
	background: crimson;
}
.itemB {
	background: gold;
}
.itemC {
	background: teal;
}

全てのグリッドトラックを同じ大きさに設定する場合は、repeat関数を使用して指定することができます。

【例】

.container {
  display: grid;
  grid-template-rows: repeat(3, 50px);
}

グリッドトラックのサイズの指定は、px や % の他に、fr という単位を使用して行うこともできます。

fr は 「fraction(比率)」 のことで、子要素の大きさを親要素から見た割合によって指定する単位です。
fr を使用すると、px や % で指定した要素のサイズ分をグリッドコンテナ全体のサイズから引いた残りの大きさが、fr で指定した要素に割り振られます。

【例】

.container {
  height: 300px;
  display: grid;
  grid-template-rows: 50px 2fr 1fr;
}

上記の例の場合、コンテナ全体の高さから 50pxを引いた残りの高さが、２：１の割合で分割されてそれぞれのグリッドアイテムに割り振られることになります。

また、グリッドアイテム同士の間隔を一定距離開けたい場合は、gapプロパティを使用して余白を指定します。

【例】

.container {
  display: grid;
  gap: 10px 20px;
}

1つの値を記述した場合は、行間と列間の両方が記述した値で指定されます。
2つの場合は、1つ目が行間、2つ目が列間の値として指定されます。

行間・列間はそれぞれ、row-gapプロパティと column-gapプロパティを使用して個別に指定することも可能です。

要素の並びを自動で配置する

通常、Grid Layoutでは、直下の要素しかグリッドアイテムとして認識されません。
そのため、グリッドアイテム内にさらにいくつかの要素がある場合に、レイアウトが揃わなかったり崩れてしまうといったケースがあります。

これを解消するのが、サブグリッドという機能です。
グリッドアイテムをサブグリッド化することによって、グリッドアイテム内の行や列のサイズを、親要素であるグリッドコンテナのサイズに合わせることができるようになります。

例えば、以下のようにカードレイアウトを作成するとします。

<div class="container">
  <div class="subContainer">
    <div class="mainView"></div>
    <h1>タイトル</h1>
    <p>これはサンプルカードです。サブクラス化されています。</p>
  </div>
  <div class="subContainer">
    <div class="mainView"></div>
    <h1>サンプルタイトル</h1>
    <p>これはサンプルカードです。サブクラス化されています。</p>
  </div>
  <div class="subContainer">
    <div class="mainView"></div>
    <h1>タイトル</h1>
    <p>これはサンプルカードです。サブクラス化されています。</p>
  </div>
  <div class="subContainer">
    <div class="mainView"></div>
    <h1>タイトル</h1>
    <p>これはサンプルカードです。サブクラス化されています。</p>
  </div>
  <div class="subContainer">
    <div class="mainView"></div>
    <h1>タイトル</h1>
    <p>これはサンプルカードです。サブクラス化されています。</p>
  </div>
</div>

これをサブグリッド化せずに実行すると、１つだけ長いタイトルが記述されているグリッドアイテムのデザインが、他のアイテムと比べて位置が揃わずに表示されてしまいます。なぜなら、各グリッドアイテム内の行や列のサイズは独立しているからです。

そこで、まずはそれぞれのアイテムをサブグリット化し、グリッドトラックのサイズが親コンテナのサイズに統一されるようにします。

サブグリット化を行う場合は、displayプロパティで gridを指定した後、grid-template-rows もしくは grid-template-columnsプロパティで subgridを指定します。

【例】

.subContainer {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

これにより、指定した行や列のサイズを親コンテナから継承することができます。
また、grid-rowプロパティで、グリッドアイテム内に配置する要素の数を指定することで、親コンテナと同じサイズで要素分の行の高さを確保することができます。

これで、要素ごとのサイズや画面サイズが変動しても、レイアウトが崩れることなく表示されるようになります。

なお、サブグリット化した際は、gapプロパティで設定した要素ごとの間隔も親コンテナから継承されるため、必要に応じて各グリッドアイテム側で値を設定し直すようにしてください。

Gridで要素をセンタリングする

CSSで、要素をセンタリングする方法はいくつか存在しますが、Grid Layoutを使用すると簡単に要素を揃えることができます。

1つの要素を揃える場合は、以下の2行のコードを記述します。

.container {
  display: grid;
  place-items: center;
}

複数の要素を揃えたい場合には、以下の3行のコードを記述します。

.container {
  display: grid;
  place-content: center;
  place-items: center;
}

place-content はグリッドコンテナ全体の配置位置を、place-itemsはアイテムごとの配置位置を調整するプロパティです。

要素が１つの場合は place-itemsのみでセンタリングすることが可能ですが、複数の要素があるとコンテナ全体に対する中央ではなく、要素数に均等に分割されたグリッドトラック内の中央にそれぞれのアイテムが配置されてしまうため、place-contentプロパティで表示位置を調整します。

また、place-contentのみで調整しようとすると、各要素のサイズが異なる場合に一番大きい要素の左端に要素が揃えられてしまうため、２つのプロパティを組み合わせることでセンタリングが可能となります。

【応用編】Gridを使用して画像とテキストを重ねる

Grid Layoutを使用して、画像にテキストを重ねるといったレイアウトも実現することができます。

Grid Layoutで表示調整を行う利点の１つとして、画面サイズが変動しても表示位置がずれることなく保たれるというメリットがあります。

さっそく、以下のHTMLコードを元に、レイアウトの表示調整をしていきましょう。

【例】

<div class="card">
  <img class="card-image" src="sampleImage.jpg" alt="サンプル画像" />
  <div class="card-description">
    <h2 class="title">タイトル</h2>
    <p class="text">サンプルテキスト</p>
  </div>
</div>

まずは、グリッドコンテナ (card) に display: grid を指定し、Grid Layoutでレイアウト調整ができるようにします。

.card {
  display: grid;
}

続いて、各アイテムの表示位置を調整し、画像にテキストが重なるように設定します。
まずは、画像のサイズと位置を調整します。についてです。

.card-image {
  /* 格子のサイズに合わせて画像サイズを変更する */
  justify-self: stretch;
  grid-column-start: 1;
  grid-row-start: 1;
}

justify-selfプロパティは、要素を水平方向のどの位置に配置するかを指定するプロパティです。
stretchを指定すると、幅いっぱいに要素が配置されます。

grid-row-start プロパティと grid-column-start プロパティは、それぞれ行と列ごとの要素の開始位置を指定しています。

次に、テキストの表示位置を調整します。

.card-description {
  justify-self: center;
  align-self: center;
  grid-column-start: 1;
  grid-row-start: 1;
}

先ほどと同じく、justify-selfプロパティで水平方向の位置を調整します。
こちらは、合わせて align-selfプロパティで垂直方向の位置も調整を行います。

その他、要素の開始位置も画像と同様の位置で指定します。
要素の表示位置はこれで完成です。

後は、テキストの色やサイズなど、各要素のデザインを調整していきましょう。
最終的には、以下の例のようなコードになります。

【例】

.card {
  display: grid;
  place-content: center;
  place-items: center;
}

.card-image{
  justify-self: stretch;
  grid-column-start: 1;
  grid-row-start: 1;
}

.card-description{
  display: grid;
  justify-self: center;
  align-self: center;
  grid-column-start: 1;
  grid-row-start: 1;
}

.title{
  text-align: center;
  color: yellow;
}

.text{
  font-weight: bold;
  color: white;
}

これで、全体の調整が完了です。
画面サイズが変わっても、レイアウトが崩れることなく表示することができます。

まとめ

いかがでしたか？今回は、Grid Layoutの使い方について解説しました。

Grid Layoutを使用することで、レイアウトの調整方法の幅もより広がります。
内容によってはコードの簡略化にもつながり、可読性を上げることにも繋がるでしょう。

ぜひ使い方をマスターして、開発の役に立ててみてください。

HTML/CSSの学習方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、HTML/CSSに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。