Zenn
AIQ Tech Blog (有志)Publicationへの投稿
📑

CSS Grid Layoutの考え方と基本的な使い方や、チートシート・Exampleなどについてまとめてみた！

まさぴょん
2024/01/21に公開
CSS
HTML
webデザイン
grid
gridlayout
tech

こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！
今回は、CSS Grid Layoutの考え方と基本的な使い方や、チートシート・Exampleなどについて、まとめましたので、ご紹介します。

そもそもGridの意味とは？

CSSのGrid Layoutの話に入る前に、英単語としての Gridの意味をおさらいしておきましょう。
こういうのは、元々の単語の意味を理解しておくことが理解を深めるのに重要です。

(鉄)格子、(肉・魚を焼く)焼き網、(自動車の屋根の)格子状荷台、(電線・水道・ガスなどの)敷設網、送電網、(街路の)碁盤目、(地図の上に引かれた検索用の)碁盤目、グリッド
引用元:gridとは

Gridの意味を調べると、Grid とは、格子状, 碁盤目のような意味合いの英単語だということがわかりました。
余談ですが、焼き網も格子状だし、京都の街並みなど都市計画によって整備された街並み・送電網なども格子状だったりすることで、イメージが深まりました。

CSSのGrid Layoutとは？

CSSのGrid Layoutは、2次元レイアウトを柔軟に構築するためのCSSのLayout機能・仕様です。
MDNのグリッドレイアウトの基本概念の説明が、コンパクトにまとまっているので、引用します。

グリッドは、列と行を定義する水平線と垂直線の集合が交差したものです。
要素をグリッド上の行と列の中に配置することができます。
引用元グリッドレイアウトの基本概念

つまり、Grid Layoutとは、格子状, 碁盤目の中に要素を配置していくLayoutということです。
(Gridの英語としての意味を確認した際の内容と一致します。)

Grid Layoutについて、さらに詳細な説明をすると、次のようなところでしょうか。

  • Grid Layoutでは、親要素(Grid Container)を基準に列数と行数をあらかじめ指定して、2次元の格子状のLayout(Grid Layout)を作成します。
  • 垂直線と水平線が交差してできたマス目(Grid Cell)に子要素(Grid Item)の配置を管理します。
  • 格子状(Grid Layout)の中にあるマス目(Grid Cell)上に子要素(Grid Item)を好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。

また、CSS Grid Layout と CSS Flexible Box Layout の違いについては、次の説明がわかりやすかったので引用します。

CSS Flexible Box Layout とは、おなじみ display: flex; を使ったレイアウトです。
両者の違いは、要素の配置の次元にあります。
引用元： CSS Grid Layout を極める！（基礎編）

CSS Grid Layout CSS Flexible Box Layout
CSSの記述 display: grid; /* or inline-grid */ display: flex; /* or inline-flex */
配置の次元 2次元 1次元
イメージ

Grid Layoutの特徴・メリットとは？

Grid Layoutの特徴・メリットをまとめると次のとおりです。

  • 列数と行数を指定して、2次元の格子状のLayoutを作成することができる。
  • 複雑なレイアウトを効率的に構築することができる。
  • 好きな要素をマス目(Grid Cell)上に配置することができる。
  • Excelと同じように複数の行と列、セルを結合することができる。
  • HTML構造とCSSによるレイアウトを分離できるので、HTMLを本来あるべき文書構造に近いものにできる。
  • より柔軟なレスポンシブなレイアウト対応ができる。

Grid Layoutの構成要素・用語の説明

Grid Layoutの概念や、特徴・メリットを理解したところで、Grid Layoutの構成要素・用語について説明していきます。
Grid Layoutは、次の6つの要素で、構成されています。

Grid Layoutの6つの構成要素
  1. Grid Container (グリッドコンテナ): Grid Layoutの基点であり、Grid Item を Wrapする親要素。
    • display: grid;またはdisplay: inline-grid;を指定することで、その要素は Grid Containerになります。
  2. Grid Item (グリッドアイテム): Grid Containerの直接の子要素。
  3. Grid Line (グリッドライン): グリッドの行や列を区切る直線(水平線と垂直線)。
    • これらはグリッド項目のサイズや位置を決定するのに使われます。
  4. Grid Track (グリッドトラック): 2つの隣接するGrid Line間のスペース。
    • つまり、Grid Layout内の行（水平方向）または列（垂直方向）のことです。
  5. Grid Cell (グリッドセル): 4つのグリッドラインに囲まれたグリッド内の単一のユニットのこと。
    • つまり、列と行が交差して作られたセル。
  6. Grid Area (グリッドエリア): 四つのグリッドラインによって定義される長方形の領域。
    • 1つあるいは複数のGrid Cellが結合してできるGrid Cellの集まりです。
    • Grid Areaには名前を付けることができ、名前指定で、アイテムを配置できます。

上記の用語が、Grid Layoutを理解して、効果的に利用するための基礎となります。
これらは、ExcelのSheetをイメージしてもらうと、よりわかりやすいかもしれません。

Grid Layout・Grid Containerを定義する

display: grid; またはdisplay: inline-grid;でGrid Layout・Grid Containerを作成できます。
Grid Containerを作成すると、直接の子要素がすべてGrid Itemへと変わります。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid Layout Test</title>
    <style>
      .grid-container {
        display: grid;
      }
    </style>
  </head>
  <body>
    <!-- Grid Container -->
    <div class="grid-container">
      <div class="grid-item">A</div>
      <div class="grid-item">B</div>
      <div class="grid-item">C</div>
    </div>
  </body>
</html>

grid-template-columnsプロパティで、列の数と幅を定義する

grid-template-columnsプロパティを使うことで、列の数と幅(列のGrid Track)を定義できます。
各列の幅(width)を個別に設定することも、repeat()を使用して、すべての列に均一の幅を設定することもできます。
試しに、grid-template-columnsプロパティを使って、列の数と幅を定義してみます。

grid-template-columns: 500px auto 100px;で、3つの列を作成 & widthは指定した値で作成した場合のLayout

grid-template-columns: repeat(3, 1fr);で、3つの列を均等なwidthで作成した場合のLayout

grid-template-columns: 100px 1fr 1fr;で、3つの列を作成 & 1つだけwidth指定した値, 他は均等割りで作成した場合のLayout

上記、3つのGrid Layout定義のSampleCodeは、次のとおりです。

gridColumns.html
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid Layout Test</title>
    <style>
      /* デフォルトのブラウザスタイルをクリア */
      * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
      }
      .grid-container {
        display: grid;
        gap: 20px;

        /* 3つの列を作成 & width は指定した値 */
        grid-template-columns: 500px auto 100px;

        /* 3つの列を均等な width で作成 */
        /* grid-template-columns: repeat(3, 1fr); */

        /* 3つの列を作成する & width指定 */
        /* grid-template-columns: 100px 1fr 1fr; */
      }
      .grid-item {
        background-color: skyblue;
        border: 1px solid #cccccc;
        padding: 20px;
        text-align: center;
        align-items: center;
        font-size: 36px;
      }
    </style>
  </head>
  <body>
    <!-- Grid Container -->
    <div class="grid-container">
      <div class="grid-item">A</div>
      <div class="grid-item">B</div>
      <div class="grid-item">C</div>
    </div>
  </body>
</html>

grid-template-rowsプロパティで、行の数と高さを定義する

grid-template-rowsプロパティを使うことで、行の数と高さ(行のGrid Track)を定義できます。
各行の高さ(height)を個別に設定することも、repeat()を使用して、すべての行に均一の高さを設定することもできます。
試しに、grid-template-rowsプロパティを使って、列の数と幅を定義してみます。

grid-template-rows: 200px auto 100px;で、3つの行を作成 & heightは指定した値で作成した場合のLayout

grid-template-rows: repeat(3, 1fr);で、3つの行をを均等なheightで作成した場合のLayout

上記、2つのGrid Layout定義のSampleCodeは、次のとおりです。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid Layout Test</title>
    <style>
      /* デフォルトのブラウザスタイルをクリア */
      * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
      }
      .grid-container {
        display: grid;
        gap: 20px;
        /* 画面の高さいっぱい */
        height: 100vh;
        /* 行の数と高さを定義する： 3つの行を作成する・heightは指定した値で作成する */
        grid-template-rows: 200px auto 100px;
        /* 行の数と高さを定義する： 3つの行を均等なheightで作成する */
        /* grid-template-rows: repeat(3, 1fr); */
      }
      .grid-item {
        background-color: skyblue;
        border: 1px solid #cccccc;
        padding: 20px;
        text-align: center;
        align-items: center;
        font-size: 36px;
      }
    </style>
  </head>
  <body>
    <!-- Grid Container -->
    <div class="grid-container">
      <div class="grid-item">A</div>
      <div class="grid-item">B</div>
      <div class="grid-item">C</div>
    </div>
  </body>
</html>

Grid Itemの配置を指定する

最後に、Grid Layout内のGrid Itemを、Grid Areaに配置する方法を見ていきます。

Grid Itemの配置を指定する方法には、次の2つがあります。

  1. Grid Line(グリッドの行や列を区切る直線)の番号で範囲指定(Grid Areaの範囲指定)をする方法
  2. Grid Area(四つのグリッドラインによって定義される長方形の領域)を指定して、配置する方法

Grid Line(グリッドの行や列を区切る直線)の番号で指定する方法について、解説が丁寧なこちらの記事から、引用します。

この方法で新しく使うプロパティは下の2つです。これらをそれぞれの アイテム のスタイルとして記述します。

  1. grid-row: アイテムが占める行のラインの番号をスラッシュ区切りで指定する
  2. grid-column: アイテムが占める列のラインの番号をスラッシュ区切りで指定する

行2トラック ｘ 列3トラックのグリッドの例で見てみましょう。
このように行2トラック ｘ 列3トラックの場合、rowのラインは1～3、columnのラインは1～4 が存在することになります。
番号は1から始まること、ラインは両端にもあるので最大のラインの番号はトラックの数+1になることに注意です。
（図では括弧書きになっていますが、負の数字でも指定することが出来ます。）
アイテム をグリッドのどこに配置するのかは、このラインの番号を用いて指定することになります。
引用元：CSS Grid Layout を極める！（基礎編）

上記の引用に記載のあるとおり、
Grid Item をGrid Area上に配置するために、ラインの番号を指定して、場所を指定していきます。

Grid Area に Grid Item を配置(番号で範囲指定)する実例①

次のように2列目 & 1行目の Grid Area に Grid Item を配置したい場合を考えます。

引用元：CSS Grid Layout を極める！（基礎編）

上記は、3Columns, 2Rows, の Grid Layoutで、その中の2列目 & 1行目の Grid Area に Grid Item を配置するようなLayoutになります。
(Grid Area はrow 1～2, column 2～3を占めている)

これを先述のgrid-columnと grid-rowで表現すると、次のようになります。

/* 配置したい Grid Item */
#item {
  /* Grid Column の Grid Line 2~3 列目の範囲  */
  grid-column: 2 / 3;
  /* Grid Row の Grid Line 1~2 行目の範囲 */
  grid-row: 1 / 2;
}

後述する、SampleCodeを実行すると、次のように表示されます。

SampleCodeは、次のとおりです。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid Layout Test</title>
    <style>
      /* デフォルトのブラウザスタイルをクリア */
      * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
      }
      /* 配置したい Grid Item */
      #item {
        /* Grid Column の Grid Line 2~3 列目の範囲  */
        grid-column: 2 / 3;
        /* Grid Row の Grid Line 1~2 行目の範囲 */
        grid-row: 1 / 2;

        /* NOTE: 隣り合わせのラインを指定する場合は、スラッシュのあとを省略することができます */
        /* 「Grid Column の Grid Line 2~3 列目の範囲」と同じ意味  */
        grid-column: 2;
        /* 「Grid Row の Grid Line 1~2 行目の範囲」と同じ意味 */
        grid-row: 1;
      }
      .grid-container {
        display: grid;
        /* 列と行の gap 20px */
        /* gap: 20px; */

        /* 列の gap 5px */
        column-gap: 5px;

        /* 行の gap 12px */
        row-gap: 12px;

        /* 画面の高さいっぱい */
        height: 100vh;
        /* 3つの列を均等な width で作成 */
        grid-template-columns: repeat(3, 1fr);
        /* 行の数と高さを定義する： 3つの行をを均等なheightで作成する */
        grid-template-rows: repeat(3, 1fr);
      }
      .grid-item {
        background-color: #eceaea;
        border: 2px solid #cccccc;
        padding: 20px;
        text-align: center;
        align-items: center;
        font-size: 36px;
      }
      .robotama {
        display: flex;
        flex-direction: column;
      }
    </style>
  </head>
  <body>
    <!-- Grid Container -->
    <div class="grid-container">
      <div class="grid-item">1</div>
      <!-- 配置したい Gird Item -->
      <div id="item" class="grid-item robotama">
        2
        <img src="./ROBOTAMA.png" alt="ぷるぷるロボ玉🐹" width="250px" />
      </div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
    </div>
  </body>
</html>

/* 配置したい Grid Item */
#item {
  /* Grid Column の Grid Line 2~3 列目の範囲  */
  grid-column: 2 / 3;
  /* Grid Row の Grid Line 1~2 行目の範囲 */
  grid-row: 1 / 2;

  /* NOTE: 隣り合わせのラインを指定する場合は、スラッシュのあとを省略することができます */
  /* 「Grid Column の Grid Line 2~3 列目の範囲」と同じ意味  */
  grid-column: 2;
  /* 「Grid Row の Grid Line 1~2 行目の範囲」と同じ意味 */
  grid-row: 1;
}

Grid Area に Grid Item を配置(番号で範囲指定)する実例②

Grid Area は、Grid Cellが1つ以上のエリア(領域)なので、次のような配置なども考えられます。


引用元：CSS Grid Layout を極める！（基礎編）

上記は、3Columns, 2Rows, の Grid Layoutで、その中の3列目 & 1~2行目の Grid Area に Grid Item を配置するようなLayoutになります。
(Grid Area はrow 1～3, column 3～4 を占めている)

これを先述のgrid-columnと grid-rowで表現すると、次のようになります。

/* 配置したい Grid Item */
#item {
  /* Grid Column の Grid Line 3~4 列目の範囲  */
  grid-column: 3 / 4;
  /* Grid Row の Grid Line 1~3 行目の範囲 */
  grid-row: 1 / 3;
}

後述する、SampleCodeを実行すると、次のように表示されます。

SampleCodeは、次のとおりです。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid Layout Test</title>
    <style>
      /* デフォルトのブラウザスタイルをクリア */
      * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
      }
      /* 配置したい Grid Item */
      #item {
        /* Grid Column の Grid Line 3~4 列目の範囲  */
        grid-column: 3 / 4;
        /* Grid Row の Grid Line 1~3 行目の範囲 */
        grid-row: 1 / 3;

        /* ライン番号3から始めて、1つ先のラインまで伸ばす */
        grid-column: 3 / span 1;
        /* ライン番号1から始めて、2つ先のラインまで伸ばす */
        grid-row: 1 / span 2;
      }
      .grid-container {
        display: grid;
        /* 列と行の gap 20px */
        /* gap: 20px; */

        /* 列の gap 5px */
        column-gap: 5px;

        /* 行の gap 12px */
        row-gap: 12px;

        /* 画面の高さいっぱい */
        height: 100vh;
        /* 3つの列を均等な width で作成 */
        grid-template-columns: repeat(3, 1fr);
        /* 行の数と高さを定義する： 3つの行をを均等なheightで作成する */
        grid-template-rows: repeat(3, 1fr);
      }
      .grid-item {
        background-color: #eceaea;
        border: 2px solid #cccccc;
        padding: 20px;
        text-align: center;
        align-items: center;
        font-size: 36px;
      }
      .robotama {
        display: flex;
        flex-direction: column;
      }
    </style>
  </head>
  <body>
    <!-- Grid Container -->
    <div class="grid-container">
      <div class="grid-item">1</div>
      <!-- 配置したい Gird Item -->
      <div id="item" class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div id="item">
        <img src="./simaenaga.jpeg" alt="可愛いシマエナガ" width="510" />
      </div>
    </div>
  </body>
</html>

/* 配置したい Grid Item */
#item {
  /* Grid Column の Grid Line 3~4 列目の範囲  */
  grid-column: 3 / 4;
  /* Grid Row の Grid Line 1~3 行目の範囲 */
  grid-row: 1 / 3;

  /* ライン番号3から始めて、1つ先のラインまで伸ばす(「3 / 4」と同じ意味) */
  grid-column: 3 / span 1;  
  /* ライン番号1から始めて、2つ先のラインまで伸ばす(「1 / 3」と同じ意味) */
  grid-row: 1 / span 2;
}

グリッドレイアウトの基本概念とチュートリアルのおすすめLink集

CSS Grid Layoutの考え方と基本的な使い方はご紹介しましたが、より応用的な使い方や、もっと基礎を固めたい方向けに、おすすめLink集をまとめておきます。

https://qiita.com/kura07/items/e633b35e33e43240d363

https://qiita.com/kura07/items/486c19045aab8090d6d9

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout

https://www.freecodecamp.org/news/css-grid-tutorial-with-cheatsheet/

https://www.codeinwp.com/blog/css-grid-tutorial-layout/

作りたい Grid LayoutのSampleCodeを探す

こちらのWebサイトでは、 さまざまなGrid LayoutのSampleCodeを公開しています。

https://gridbyexample.com/examples/

まとめ

CSSのグリッドレイアウトは、FlexBoxと同様にCSSデザインでの必須スキルなので、ぜひ考え方・概念や、使い方を理解して、活用してみてください。

個人で、Blogもやっています、よかったら見てみてください。

https://masanyon.com/

注意事項

この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。

求む、冒険者！

AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨

詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。

参考・引用

https://qiita.com/kura07/items/e633b35e33e43240d363

https://zenn.dev/manase/scraps/6fd1fd48c282c7

https://ejje.weblio.jp/content/grid

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout

https://www.freecodecamp.org/news/css-grid-tutorial-with-cheatsheet/

https://qiita.com/kura07/items/486c19045aab8090d6d9

AIQ Tech Blog (有志)
AIQ Tech Blog (有志)Publication

AIQ 株式会社 に所属するエンジニアが技術情報をお届けします。 ※ AIQ 株式会社 社員による個人の見解であり、所属する組織の公式見解ではありません。 Wantedly: wantedly.com/companies/aiqlab

Discussion