CSS Gridの基本が一気にわかる！考え方から実践方法まで徹底解説

Webサイトのレイアウトを作るときに便利な、

CSSの display:grid (グリッドレイアウト)の考え方と使用例の紹介をします。

グリッドってよくわからないし、難しそう…

フレックスとブロックでなんとかなってるし、別にいいかな〜

僕はずっとそう思っていましたが、グリッドレイアウトを覚えて作業効率がぐっと上がりました。

グリッドレイアウトを使えば

• HTMLの記述が減る
• レスポンシブに強いサイトを作れる
• 配置の順番を好きに調整できる

といったメリットがあります。

まずは考え方から順に覚えていけば、初心者でも問題なく使えるようになります。

この記事では、図解を使ってグリッドレイアウトの考え方、使い方をまとめています。

＼初心者がレイアウトやデザインを学ぶのに最適な一冊！／

グリッドレイアウトの基本・考え方

ここでは、CSS Gridを使うときの基本的な考え方をお伝えします。

グリッドレイアウトの軸の考え方

ブロックやインライン、フレックスボックスとはまた違う、「２つの軸」を持つ考え方が必要になります。

グリッドレイアウトはHTMLでいうところのテーブル、エクセルの表なんかのイメージですね。

フレックスボックスは、一方方向への軸を基準に、配置を調整します。

親要素にgridを指定して、デフォルトですと子要素が左上から右下へ順番に配置されます。

グリッドを指定するときには、

• 縦が何列あるか
• 横が何行あるか

これらを指定します。

ばく

行はどんどん足されていくので、列だけを指定することが多いですね。

子要素をどこに置くかを指定できるため、縦横のマス目を決めて「どのマスに配置するか」を選ぶイメージで使います。

列数を指定しないと、1列で積み重なり、display:blockのような見た目になります。

グリッドレイアウトでHTMLを減らせる

フレックスボックスやブロックでサイトを組むときは、横に並べるときは横に並べるdivやlistを用意して並べる必要がありましたが、

グリッドレイアウトでは子要素を直接縦横好きに並べることが出来ます。

そのため、子要素を横に並べるための要素を用意することなく、grid要素直下に子要素を並べて書くことが出来ます。

 <div class="grid-contents">
      <header class="header"></header>
      <div class="side-left"></div>
      <article class="main"></article>
      <aside class="side-right"></aside>
      <footer class="footer"></footer>
    </div>

フレックスボックスを利用したばあいは、真ん中の要素を横に並べるために以下のようになります。

  <div class="flex-contents">
      <header class="header"></header>
      <div class="wrapper">
        <div class="side-left"></div>
        <article class="main"></article>
        <aside class="side-right"></aside>
      </div>
      <footer class="footer"></footer>
    </div>

真ん中のコンテンツを横に並べるための div が必要になり、HTMLが増えてしまいます。

しかしグリッドレイアウトなら、囲う要素はひとつだけで配置調整できるので、記述量が減り、よりシンプルに作れます。

グリッドレイアウトの具体的な使い方

グリッドレイアウトの仕組みはわかっても何に使うのか、何が便利なのかわからないと使いづらいですよね。

私の例ですが、具体的に以下のような箇所に使います。

• カードレイアウト
• ヘッダーレイアウト
• フッターレイアウト
• ボタン

私が特に便利だと感じている点は次の2つです。

• レスポンシブデザインに強い
• HTML構造がシンプルになる

情報量が多くレイアウトが複雑になりやすい箇所に使うと、狙った配置がしやすく便利です！

ばく

レイアウトが煩雑なところに使う

例えば、aboutセクションのように

• 名前(タイトル)
• 画像
• 説明
• 経歴
• スキル

といった情報が並ぶところであり、情報が多く、レイアウトが複雑なところはグリッドレイアウトで調整しやすいです。

具体的に、私のポートフォリオサイトのカードはグリッドレイアウトで作成しています。

レスポンシブに強いので便利

グリッドレイアウトは子要素をそのまま配置指定することができるので、コンテンツの順番が多少入れ替わっても問題なく並べることが出来ます。

スマホ表示では縦並び、PCでは横に並ぶ…、なんてカードレイアウトにもHTMLの工夫もなく対応できます。

非常に楽です。

子要素をそのまま様々な配置を行えるので、HTMLで横並びにするために囲う、ということが減るのでコード記述量が減る、クラス名で悩むことが減るといった効果があります！

グリッドレイアウトの使用例

グリッドレイアウトでは列の数を調整することで様々な配置ができます。

MDNを参考に、12列(カラム)や16列(カラム)をベースにしたもの。

全体を12で割ったイメージでレイアウトし、好きな位置に配置します。

列をまたがったレイアウトや、子要素を右に左にと指定して配置することができるので、自由度の高いサイトが作れます。

ただサイト全体をこのようにすると管理が大変なので、セクション単位や、コンテンツ単位での利用がわかりやすいですね。

要素の数だけ用意したもの。などなど、使い方が自分で設計できる分、考え方の理解が必要になります。

私のポートフォリオサイト。全体を3×3でレイアウトしています。

まとめ：グリッドレイアウトの考え方・使い方

導入時に覚えることはありますが、使いこなせるようになると様々なレイアウトに対応できるようになります。

もちろん、学習コストもありますが少しずつ使っていくと慣れていきます。

レスポンシブに困った時、コードが煩雑になる時、デザインが複雑な時などにとても便利です。

基本的なコード付きの記事はこちら

＼HTML・CSSの基本を学ぶならこちら／

最後までご覧いただきありがとうございました