1行目2列、2行目3列のレイアウトはflexではなくgridで作成可能

1行目2列、2行目3列のレイアウト

Webサイトを制作する際にレイアウトの1部に1行目2列、2行目3列のような列が揃っていないレイアウトを作成したいことがあります。

例えばデジタル庁のWebサイトのトピックス部分は1行目2列、2行目3列のレイアウトになっています。

デジタル庁のWebサイトではflexプロパティを使用して、以下のようなCSSでレイアウトを実装していました。

※ デジタル庁のWebサイトとはclass名などを変えています。

HTML

<ul class="flex">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

CSS

:root {
  --flex-gap: 1rem;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flex-gap);
}

.flex > li {
  width: calc((100% - (var(--flex-gap) * 1)) / 2);
  padding: 2rem;
  background: lightblue;
  border: 1px solid #000;
}

.flex > li:nth-child(n+3) {
  width: calc((100% - (var(--flex-gap) * 2)) / 3);
}

CSSのグリッドレイアウトの場合は格子状のレイアウトのイメージが強いので、1行目2列、2行目3列のレイアウトを作成する際は、flexを使用しているWebサイトがよくあります。

しかし、以下のように書けば、gridでも1行目2列、2行目3列のレイアウトを作成できます。

HTML

<ul class="grid">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.grid > li {
  padding: 2rem;
  background: lightblue;
  border: 1px solid #000;
  grid-column: span 2;
}

.grid > li:nth-child(-n+2) {
  grid-column: span 3;
}