🌐

グリッドレイアウトを用いて要素を等間隔に並べる

2024/07/19に公開

CSS

HTML

tech

はじめに

こんとんと〜〜〜〜！
フェネックレーサー VTuber の嘉音とんと（かのんとんと）と申します。
普段は YouTube で雑談やゲーム配信を行なっている一方で、趣味でフロントエンドを中心とした実装をちまちま行なっています。
https://www.youtube.com/@kanon_tonto

今回は駆け出しフロントエンドエンジニアである私が「グリッドレイアウト」について軽くまとめてみたというものです。

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

タイトルにもあります「グリッドレイアウト」って何やねん、ってお話をしますね。

グリッドレイアウトとは、正式には「 CSS グリッドレイアウト」という、ページやコンポーネントを配置したり分割するのに適した関係性というものを定義したモジュールの一部だと思ってください。

よく世に溢れてる Web サイトを見ると、このグリッドレイアウトが適用されている場面が多く見られます。
今回はその中でも、実際に私が作成した自己紹介ページ「とんとのひみつきち」を例に取って解説していきたいと思います。

https://27ma4-ton10.netlify.app/

格子状の行と列

私が作成した Web サイトのどこにグリッドレイアウトが隠れているのかと言うと、こちらです。

画像は私の主な配信の紹介コンテンツになっているのですが、サムネイルと YouTube へのアクセスボタンを 1 つの塊としたコンポーネントが 2 × 2 の格子状に並んでいるのが分かります。
これがグリッドレイアウトです。

Google Chrome の開発者ツールを用いて詳しくフォーカスを当てて見てみると、縦横に区切られていることも分かります。

このラインに沿って要素が配置されている、これこそがグリッドレイアウトです。

実際にやってみる

では実際に、どのようにして格子状のラインに要素を配置するのか、コードベースで説明をします。
先ほど画像でお見せした Web ページの実際のソースコードを簡略化したものを利用しますね。

<div className="contents">
  <!-- 1 つ目のビデオ -->
  <div className="video">
    <img src={thumbnail_url} alt="video-thumbnail" />
      <div className="video-title-and-youtube-link">
        <p>{title}</p>
        <a href="Link to video" rel="noopener noreferrer" target="_blank">YouTubeで見る</a>
      </div>
  </div>
  <!-- 2 つ目のビデオ -->
  <div className="video">
    <img src={thumbnail_url} alt="video-thumbnail" />
      <div className="video-title-and-youtube-link">
        <p>{title}</p>
        <a href="Link to video" rel="noopener noreferrer" target="_blank">YouTubeで見る</a>
      </div>
  </div>
</div>

上記のコードは contents という大枠の中に 2 つのビデオコンポーネントを含んでいる形になります。
この 2 つのビデオコンポーネントを良い感じに横並びで表示したい...！という願いを叶えていきます。

その前に、グリッドレイアウトの格子状のラインについてもう少し詳しく解説をします。

ここから先は基本的に CSS でグリッドレイアウトを実現していきますので、 CSS を記述していきます。

.contents {
  display: grid;
}

まず contents という全ての要素を包括している箇所に対して上記のように grid オプションを指定します。

すると画像のように、要素が全て一列に並んでいる且つ各ビデオごとに横のラインで区切られていることが分かります。
これで先ずは全体に対してグリッドレイアウトを適用させることが出来ました。

fr という単位

次にこれらを 2 × 2 の格子状にするのですが、ここでひとつ解説を挟みます。
例えば以下のようなグリッドレイアウトがあるとします。

グリッドレイアウトには行と列が存在し、それぞれに番号が振られているとイメージしてください。
ここでポイントがいくつかあります。

左上から順に番号が振られている
番号の振り分けは 1 番から始まるということ

この 2 つのポイントをよく覚えておいた上で、下記のように番号を振ります。

この番号が何に使われるかと言うと、「その要素は何番から何番まで領域を確保するん？」という幅や高さの指定に利用します。

今回は例として 5 列のラインを生成してみます。

.contents {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: auto;
}

すると以下のように要素が横並びになりました！
これは 5 つの列を作成することで 4 つの空間を作り出すことが出来ている例です。

...ん？ fr って何やねん。
しかも 5 列って言ったのに 4 つの空間って何やねん。

そう思われたかも知れません。
fr とは、横に 12 分割されたラインのうち、何 % を領域として確保するかというものだと思ってください。
以下に図を示しました。

~~なんか等間隔じゃないのはご愛嬌ということで。~~

横に 12 個並んだボックスがあると考えて、そのうち何個をウチの領域にしますよ〜というのを比率で示せるのが fr です。

なので grid-template-columns: 1fr 1fr 1fr 1fr; という記述は、それぞれの領域が 12 等分したうちの 2 個ずつを均等に分けますよ〜という意味になります。

ですので、 4 つの空間と 5 つの列が生まれるということになります。

等間隔に配置する

さて、そろそろビデオたちを綺麗に配置してあげましょう。
細かなスタイルなどは省略するとして、最低限以下のような 2 × 2 の配置にすることを目標にします。

先ほど 4 つの空間と 5 つの列を生成しました。
この空間の中に 4 つの動画を配置する場合、どのようにしたら良いでしょうか。
先ほど「行と列にはそれぞれ番号が振られている」ということをお伝えしたかと思います。
その番号の「 n 番目から m 番目まではウチの領域ね！」ということを明示的に伝えてあげると上手くいきそうですね。
そこで登場するのが grid-column-start と grid-column-end です。

.video {
  grid-column-start: 1;
  grid-column-end: 5;
}

上記のように、 CSS を書き換えると縦一列の状態に戻りました。
ふざけるな！！！！！作りたいものから離れているじゃないか！！！！詐欺だ！！！！
と思われるかも知れませんが、まぁ落ち着いて。

これは何を示しているかというと、「ウチは列番号 1 番から 5 番までをもらうで！！！」という意味になります。
下記に図を示します。

列の 1 番目から 5 番目を持っていかれると、赤いエリアが領域として確保されるため、縦一列に見えるというわけです。

逆に、これを以下のように書き換えてみましょう。

.video {
  grid-column-start: 1;
-  grid-column-end: 5;
+  grid-column-end: 3;
}

そうすると以下のような見た目になります。要素が全て左半分に寄っちゃいました。

これはつまり、「ウチは列番号 1 番から 3 番までをもらうで！！！」という意味になるので、ちょうど左半分だけが領域として確保されるようなイメージです。

しかし、これでは期待している 2 × 2 の格子状にはなりません。
これを実現するためには...

奇数番の要素は 1 ~ 3 番目を確保させる
偶数番の要素は 3 ~ 5 番目を確保させる

ことが必要となります。
どういうことかと言うと、要素にも番号があります。

<div className="contents">
  <div className="video">
    <!-- ワイ 1 番やで -->
  </div>
  <div className="video">
    <!-- ワイ 2 番やで -->
  </div>
  <div className="video">
    <!-- ワイ 3 番やで -->
  </div>
  <div className="video">
    <!-- ワイ 4 番やで -->
  </div>
</div>

同じ video という名前を持つ要素が複数ある場合にはそれぞれに番号が振られていると考えてください。
このうち 1番と3番は左側、2番と4番は右側　に配置できれば良いのです。

CSS において n 番目を指定する際には nth-child が用いられます。
その引数として、奇数もしくは偶数という情報を渡してあげます。

.video:nth-child(odd) {
  grid-column-start: 1;
  grid-column-end: 3;
}

.video:nth-child(even) {
 grid-column-start: 3;
 grid-column-end: 5;
}

こうすることで、1番と3番は1~3列目を、2番と4番は3~5列目を確保する という意味合いになります。
これを適用させると...

はいできた！！！！！！！！！！！！！！！！！！！！！！！！！

文字読むのダルい！！！！！！

まぁまぁそう言わずに。
今回の記事の内容を動画にまとめたものもありますので、めんどくさがりやな方はこちらもチェックしてください！

おわりに

今回はグリッドレイアウトについて解説をしてきました。
行と列の番号であったり fr の概念など、分からないと躓いちゃうポイントが幾つかあったので、今回記事にして紹介させていただきました。

この記事が少しでも役に立つことを願っております(´｡✪ω✪｡｀)

以上、フェネックレーサー VTuber 嘉音とんとでした！
またお会いしましょう٩(ˊᗜˋ*)و