Skip to content

CSS Gridで作るレスポンシブ対応のレイアウト5種

June 7

・css

CSS Gridでレスポンシブ対応のレイアウトのサンプルをいくつか作成してみました。仕組みやプロパティなどの基本的な説明は省きます。レイアウトのサンプル5種それぞれデモページを用意しています。

今回CSS Gridの導入に伴い実際のWebサイトではどのような使われかたをしているかを調べたことをきっかけに、自分用のメモも兼ねていくつかサンプルを作成しました。よく紹介されている「ヘッダー、フッター、サイドバー、メインコンテンツに分割してそれぞれの幅や位置を指定する」といったものではなく、より実践的なサンプルを作成してみたいと思いました。

※ 記事内のCSSはGridに関係する部分のみを記述しています。テキストや画像などは適宜調整してください。
※ IE対応はベンダープレフィックスを付与するといった単純なものだけではないため省略します。（自動でベンダープレフィックスを付与するオンラインツールAutoprefixer CSS online またはNode.jsのツールAutoprefixerがあります）

メインビジュアルにキャッチコピーを重ねる

ファーストビューのメインビジュアルでよく見られる、画像をウィンドウ幅よりやや狭めてキャッチコピーを重ねるレイアウトです。スマホでは重ねずキャッチコピーを上、画像を下にします。

<section class="container">
  <h3 class="main_copy">Lorem ipsum dolor<br />sit amet,<br />consectetur adipisicin</h3>
  <div class="main_img">
    <img src="img/image.jpg" alt="" />
  </div>
</section>
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 32px 0;
}

@media screen and (min-width: 600px) {
  .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 32px 3.125vw;
  }

  .main_copy {
    grid-column: 2 / 8;
    grid-row: 1;
    align-self: center;
    z-index: 2;
  }

  .main_img {
    grid-column: 3 / -1;
    grid-row: 1;
    z-index: 1;
  }
}

MDN グリッドレイアウトの基本 z-index による項目のレイヤー化に「グリッドアイテムは、同じセルを占有できます。」とある通り、グリッドアイテムを重ねることができます。重なりあった要素には z-index を指定することで重なりの順序を調整することができます。 position プロパティは使用しません。

サンプルではキャッチコピーを画像の上下中央位置に配置するため、キャッチコピーに align-self: center; を指定します。

「メインビジュアルにキャッチコピーを重ねる」デモはこちら

見出しとテキストと補助的な写真のセット

片側に写真があり、もう片側に見出しや本文、リンクボタンなどがあるというレイアウトです。名前付きのグリッド領域を指定する grid-template-areas を使用します（IE未対応）。スマホではテキスト類が上、画像が下になるようにします。

<section class="container">
  <h3 class="head">Lorem ipsum dolor sit amet,<br />consectetur adipisicin</h3>
  <div class="txt">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi ut
    </p>
    <a href="" class="btn">More Detail</a>
  </div>
  <figure class="img">
    <img src="img/image.jpg" alt="" />
  </figure>
</section>
.container {
  display: grid;
  grid-template-areas:
    "head"
    "txt"
    "img";
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-gap: 1em 32px;
}

.head {
  grid-area: head;
}

.img {
  grid-area: img;
}

.txt {
  grid-area: txt;
}

@media screen and (min-width: 900px) {
  .container {
    grid-template-areas:
      "img head"
      "img txt";
    grid-template-columns: calc(55% - 25px) calc(45% - 25px);
    grid-template-rows: auto 1fr;
    grid-gap: 1em 56px;
  }
}

grid-template-areas で作成する場合、HTML上でのグリッドアイテムの順番に関わらず自由に配置することができます。サンプルでは画像を左にしていますが、 grid-template-areas の指定を変えるだけで、HTMLはそのままに位置を簡単に入れ替えることができます。

「見出しとテキストと補助的な写真のセット」デモはこちら

サムネイル付きのブログやニュース一覧

トップページなどに数件の最新記事を表示するような場合のレイアウトです。サンプルはアイキャッチありで作成します。記事の表示数は4つ、レイアウトはスマホ2列、タブレット・PC4列とします。

<section class="articles_wrap">
  <h3 class="articles_head">News</h3>
  <a href="" class="article">
    <div style="background-image: url(img/image.jpg)"></div>
    <p>News</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicin</p>
    <p>2019.06.07</p>
  </a>
  <a href="" class="article">
    <div style="background-image: url(img/image.jpg)"></div>
    <p>News</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicin</p>
    <p>2019.06.07</p>
  </a>
  <a href="" class="article">
    <div style="background-image: url(img/image.jpg)"></div>
    <p>News</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicin</p>
    <p>2019.06.07</p>
  </a>
  <a href="" class="article">
    <div style="background-image: url(img/image.jpg)"></div>
    <p>Column</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicin</p>
    <p>2019.06.07</p>
  </a>
</section>
.articles_wrap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr;
  grid-gap: 32px 5vw;
}

.articles_head {
  grid-column: 1 / -1;
  grid-row: 1;
}

.article {
  grid-column: span 6;
}

@media screen and (min-width: 600px) {
  .articles_wrap {
    grid-gap: 32px 3.125vw;
  }

  .article {
    grid-column: span 3;
  }
}

コンテナの列を12分割します。スマホでは1行に記事を2つ並べたいので、12トラックの半分6トラックにまたがるように指定します。PCでは1行に4つ並べるので、3トラックにまたがるようにします。
コンテナの列の分割数はレイアウトにあわせて適宜調整してください。

「サムネイル付きのブログやニュース一覧」デモはこちら

ブロークングリッドレイアウト

縦軸や要素同士の間隔を完全には揃えず少し崩したブロークングリッドレイアウトです。スマホでは1列に並べます。

<section class="container">
  <div href="#" class="item1">
    <div><img src="img/grid_sample2.jpg" alt="" /></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicin</p>
  </div>
  <div href="#" class="item2">
    <div><img src="img/grid_sample.jpg" alt="" /></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicin</p>
  </div>
  <div href="#" class="item3">
    <div><img src="img/grid_sample2.jpg" alt="" /></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicin</p>
  </div>
</section>
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 32px 0;
}

@media screen and (min-width: 600px) {
  .container {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 32px 3.125vw;
  }

  .item1 {
    grid-column: 2 / span 4;
    align-self: center;
  }

  .item2 {
    grid-column: 8 / -1;
    align-self: center;
  }

  .item3 {
    grid-column: 7 / span 4;
    align-self: center;
  }
}

PCではコンテナの列を12分割します。アイテムごとに、トラックいくつ分の幅にするか、どのグリッド線の位置に配置するかを自由に指定してください。

「ブロークングリッドレイアウト」デモはこちら

フッター

フッターの内部のロゴやリンクリスト、コピーライトなどのレイアウトです。リンクリストの3つのブロック部分はFlexboxを使用しています。

<footer class="footer">
  <div class="footer_logo_wrap">
    <p class="footer_logo">Logo</p>
    <address>〒000-0000 ■■都■■区■■町00-00-00</address>
  </div>
  <div class="footer_nav">
    <ul class="footer_nav_list">
      <li><span>Footer Nav</span></li>
      <li><a href="">Footer Link</a></li>
      <li><a href="">Footer Link</a></li>
      <li><a href="">Footer Link</a></li>
      <li><a href="">Footer Link</a></li>
    </ul>
    <ul class="footer_nav_list">
      <li><span>Footer Nav</span></li>
      <li><a href="">Footer Link</a></li>
      <li><a href="">Footer Link</a></li>
      <li><a href="">Footer Link</a></li>
      <li><a href="">Footer Link</a></li>
    </ul>
    <ul class="footer_nav_list">
      <li><span>Footer Nav</span></li>
      <li><a href="">Footer Link</a></li>
      <li><a href="">Footer Link</a></li>
      <li><a href="">Footer Link</a></li>
      <li><a href="">Footer Link</a></li>
    </ul>
  </div>
  <ul class="footer_legal">
    <li class="footer_legal_item"><a href="">品質方針・環境方針</a></li>
    <li class="footer_legal_item"><a href="">個人情報保護方針</a></li>
    <li class="footer_legal_item"><a href="">個人情報の取り扱いについて</a></li>
    <li class="footer_legal_item"><a href="">サイトマップ</a></li>
  </ul>
  <p class="footer_copyright">&copy; 2019 chocolat All Rights Reserved.</p>
</footer>
.footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 24px 24px;
}

.footer_logo_wrap,
.footer_legal,
.footer_copyright,
.footer_nav {
  grid-column: 1 / -1;
}

@media screen and (min-width: 960px) {
  .footer {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 32px 3.125vw;
  }

  .footer_logo_wrap {
    grid-column: 1 / span 4;
  }

  .footer_nav {
    grid-column: 6 / -1;
  }

  .footer_legal {
    grid-row: -1;
  }

  .footer_copyright {
    grid-row: -1;
    justify-self: end;
    align-self: end;
  }
}

PCではフッターの上段にロゴやリンクリスト、下段にその他のリンクとコピーライトが配置されるようにしています。下段はその他のリンク類とコピーライトが同じ行になるように grid-row を指定します。

「フッター」デモはこちら

参考 : MDN Web Docs 「CSS グリッドレイアウト」, <https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout>（参照2019-06-07）

Tags

responsive ui how-to