【css】gridを使ってレイアウトを作ろう【grid編その１】

ホームページ制作に本格的にgridレイアウトが導入されてから、格段にページのレイアウトを作りやすくなりました。
そのgridレイアウトを実際にやってみたいと思います。

全体のレイアウトをgridで作る

gridレイアウトは要素を枠で切り分けるような機能を持っています。
例えば、ヘッダ、本文、サイドバー、フッタがある平均的なページの構成を考えた場合、gridレイアウトでこの様に作ることが出来ます。
（レイアウトが分かりやすくなるように、要素に枠線を引いています。）

<div class="app">
  <header class="header">
    <h1>ヘッダ</h1>
  </header>
  <main class="main">
    <article class="contents">
      <h1>メインの文章がここに入る</h1>
      <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
      <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
      <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
      <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
      <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
      <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
    </article>
  </main>
  <nav class="sidebar">
    <h1>メニュー</h1>
    <ul>
      <li>メニュー1</li>
      <li>メニュー2</li>
      <li>メニュー3</li>
      <li>メニュー4</li>
      <li>メニュー5</li>
      <li>メニュー6</li>
    </ul>
  </nav>
  <footer class="footer">
    <h1>フッタ</h1>
  </footer>
</div>

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}
body {
  padding:30px;
}
.app {
  display:grid;
  grid-template-columns: 1fr 200px;
  gap:15px;
}
.header,.contents,.sidebar,.footer {
  border:1px solid #ccc;
  padding:10px;
}
.header,.footer {
  grid-column: span 2;
}
.sidebar ul {
  list-style: none;
}

ヘッダ、本文、サイドバー、フッタそれぞれが適切な場所で表示されるようになりました。
このように自由自在に箱を並べてレイアウトする事で、今までよりも直感的かつシンプルに全体のレイアウトを作ることが出来ます。

まず列を設定する

まず最初に列を作成します。今回の列に当たるのは、メイン部分とサイドバー部分の２列になります。
その部分が「grid-template-columns: 1fr 200px」の部分になります。1frという単位は、gridレイアウトで使われる単位で、同じ数字のfrが並ぶと均等に分割されます。
このgridレイアウトの良い所は、勝手に計算をしてくれるところです。
サイドバー部分の方を「200px」と指定して、余白に「gap:15px」を指定しているので、その残りが1frの範囲に自動的に割り当てられます。

例えば「列が1fr 4rem 1fr 130pxでgapが10px」の場合、自動的にこの様に配置されます。

２が４rem、４が130pxで配置され、残った１と３が1frなので残りを2つに分けた同じ長さで配置されています。
このように、列の指定はかなり自由に作成することが可能です。

あとは行を設定する

次は行の設定に入ります。まず最初の行はヘッダになります。ヘッダは横一列したいので、2つある列を1つに合体させます。それが「grid-column: span 2」の部分になります。このように、エクセルでセルをマージする感覚でくっつけてしまうことが出来ます。
2行目は本文とサイドバーが入りますので、そのまま2列、そして3行目にフッタが入るのでここも行を1つに合体させます。

このように、おおまかなレイアウトをgrid１つでで作ってしまうことが可能です。

まとめ

このような感じで、gridを使ってみれば、レイアウトのどの部分がどの要素に割り当てられるのかが分かるようになってきます。

もしも、ホームページ制作でお困りでしたらパタパタワークスがあなたの力になれるかもしれません。ちょっとしたことでもお気軽にお問い合わせください。それではまた！