マガジンレイアウトのCSS Grid実装

メイン記事 + サブ記事複数を組み合わせたマガジン風レイアウト。ニュースサイトやメディアサイトに最適です。

プレビュー

feature

sub-1

sub-2

sub-3

sub-4

article-1

article-2

article-3

article-4

HTML

<div class="grid-container">
  <div class="item-1">feature</div>
  <div class="item-2">sub-1</div>
  <div class="item-3">sub-2</div>
  <div class="item-4">sub-3</div>
  <div class="item-5">sub-4</div>
  <div class="item-6">article-1</div>
  <div class="item-7">article-2</div>
  <div class="item-8">article-3</div>
  <div class="item-9">article-4</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  height: 500px;
}

.item-1 { grid-area: 1 / 1 / 3 / 3; }
.item-2 { grid-area: 1 / 3 / 2 / 4; }
.item-3 { grid-area: 1 / 4 / 2 / 5; }
.item-4 { grid-area: 2 / 3 / 3 / 4; }
.item-5 { grid-area: 2 / 4 / 3 / 5; }
.item-6 { grid-area: 3 / 1 / 5 / 2; }
.item-7 { grid-area: 3 / 2 / 5 / 3; }
.item-8 { grid-area: 3 / 3 / 5 / 4; }
.item-9 { grid-area: 3 / 4 / 5 / 5; }

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .grid-container > * {
    grid-area: auto;
  }
}

このレイアウトの解説

マガジンレイアウトの本質は「情報の優先度を面積で表現する」ことです。CSS Gridのgrid-column / grid-rowで自由に範囲を指定できるため、従来は実装が難しかった非対称なレイアウトも、数行のCSSで実現できます。本プリセットではトップの特集記事を2×2の範囲に大きく配置し、その横と下に小さめのサブ記事を並べた典型的な構成です。

どんな場面で使う？

ニュースサイトのトップページ、ブログのアーカイブ、キュレーションメディアなど、複数の記事に視覚的な優先度をつけたい場合に有効です。

自分でカスタマイズしたい方へ

列数・行数・Gap・セルの範囲を自由に変更したい場合は、CSS Grid Generatorでドラッグ操作によりオリジナルのグリッドを作成できます。詳しい使い方は使い方ガイドをご覧ください。

ジェネレーターで自分のグリッドを作る →