gapで項目の間隔をそろえる：項目同士と外周の余白を分けよう

横に並べた項目へ一つずつ右余白を付けると、行の最後にも余白が残ります。折り返す位置が変わる一覧では、最後の項目を決め打ちする前に、gapで項目の間隔をそろえる方法を試してみましょう。

題材は架空の小さな展示の分類一覧です。「写真」「版画」「紙の立体」の三項目を表示します。分類名は読むだけの情報で、押して絞り込む機能はありません。今回は列数の切り替えではなく、項目間と外周の余白の担当を分けます。

どこの空きを変えたいか、三つに分ける

一つ目は隣の項目との間、二つ目は折り返した行との間、三つ目は一覧を囲む枠と項目の間です。同じ「余白」でも、どこを変えたいかを指してからCSSを選びます。

gapは並べる親へ指定する間隔です。子要素それぞれの外側に余白を足す書き方とは違い、項目同士の間を作ります。外周の空きは別にpaddingで用意する構成にします。ここでの親はul、子はその直下のliです。

見た目のまとまりを決める考え方は余白をそろえる記事で扱っています。この記事では、決めた間隔をどの要素に書くかと、折り返した後も同じ規則が使えるかに絞ります。

横方向に並ぶ親へ、二種類のgapを書く

次のHTMLは練習用ページのbodyへ置く断片です。続くCSSを同じページで読み込みます。実際のナビゲーションにする場合のリンクは含めていません。

<ul class="exhibit-types">
  <li>写真</li>
  <li>版画</li>
  <li>紙の立体</li>
</ul>

.exhibit-types {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 1rem;
  list-style: none;
  border: 1px solid #555;
}
.exhibit-types > li {
  margin: 0;
  padding: 0.25rem 0.5rem;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  background: #fff0e5;
}

Flexboxは子要素を並べる仕組みで、ここではrowで横方向、wrapで折り返しを指定しています。この組み合わせのgapは、最初の0.5remが行同士、次の1remが同じ行の項目同士の間隔です。一行に収まっている間は、行同士の間隔を観察できません。

MDNのgapの説明では、レイアウトの種類やFlexboxの方向によって、二つの値が担当する位置が変わることを確認できます。今回は横方向に限定しているため、縦方向へ変更した例へ説明をそのまま当てはめないでください。

gapを増やしても、外周の空きは別に残る

親のpaddingを一時的に0にすると、枠と項目の間の空きがなくなります。一方、項目同士のgapは残ります。次にpaddingを戻し、gapだけを0にすると、外周は残って項目が接近します。この二つを別々に変えると、担当する場所を比べられます。

子のpaddingは、色の付いた項目の内側で文字と端の間を作っています。親のpadding、子のpadding、gapの三つを同じ数値だからとまとめて変更せず、何を動かしたいかに応じて選んでください。

既存ページへ移す場合は、子に付いていたmarginも確認します。gapを足すだけでは、以前の余白と合わせて意図より広くなることがあります。また、justify-contentで余った空間を分配していると、見える間隔はgapの値だけでは決まりません。提示例はそうした追加の分配を指定していません。

項目を増やし、外周の余白が変わらないか見る

一覧を作り、広い画面から少しずつ幅を狭めます。二行へ変わったところで、項目間、行間、外周を順に確認してください。最後の項目へ特別な余白の解除を足さなくても、規則が保てるかを見ます。

次に一項目を「紙と糸を組み合わせた立体作品」に変え、文字の末尾が読めるか試します。折り返しを許可することと、長い内容が欠けないことは別の確認です。試した画面幅と結果を一行ずつ残しましょう。

無料レッスンのページへ一覧を加える場合も、まずこの三項目だけで比べます。完成条件は、どの空きがgapで、どの空きがpaddingなのかを画面上で指せることです。