CSSグリッドレイアウトで「隙間」を完璧にコントロールする｜現場で使える実践テクニック

こんにちは！
今日は「CSSグリッドレイアウトの隙間コントロール」について解説します。

グリッドの隙間で失敗した経験談

僕も新人時代、このミスをやってしまいました。
デザイナーから「カード間の隙間は20pxで統一してね」という指示をもらったんですが、僕はmarginを使ってカードに間隔をつけてしまったんです。
そしたら両端のカードだけ隙間がおかしくなって、ほんまに大変でした。

現場でよく見るのは、グリッドの隙間をmarginやpaddingで無理やり調整している人なんですよね。
実はgapプロパティを使えば、こういった問題はめっちゃ簡単に解決するんです。
今日はそれについて深掘りしていきたいと思います。

gapプロパティの基本と応用

gapプロパティは、Grid または Flexbox のアイテム間に均等な隙間を作ってくれるプロパティです。
これが便利なのは、親要素で隙間を一元管理できるという点ですよ。

基本的な書き方はこんな感じです。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

シンプルですよね。
gap: 20px;と書くと、行間と列間の両方が20pxになります。

でも時々、「行間は20pxで列間は30px」みたいに分けたい場合がありますよね。
そういう時はrow-gapとcolumn-gapを分けて書くといいですよ。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 20px;
  column-gap: 30px;
}

または省略形で書くこともできます。
gap: 20px 30px;と書けば、最初の値が行間、次の値が列間になるんですよ。

もう一つ大事なポイントなんですが、gapは親要素のグリッドコンテナに対してだけ効きます。
カード自体にpaddingがある場合は、そのpaddingと組み合わせて全体のバランスを調整する必要があります。
僕も最初は「あれ、なんか隙間が多すぎないか」って思ったことがあります。

レスポンシブ対応で隙間を動的に変える

実務では、スマートフォンとデスクトップで隙間を変えたい場合がほとんどです。
例えば、PCでは30pxだけど、スマートフォンでは15pxにしたいみたいなやつですね。

これはメディアクエリを使って実装します。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

@media (min-width: 768px) {
  .grid-container {
    gap: 30px;
  }
}

こういう書き方をすると、スマートフォンでは狭い隙間、タブレット以上では広い隙間になります。
ユーザー体験がめっちゃ良くなりますよ。

あと、僕がよく使う技がrepeat(auto-fit, minmax())との組み合わせです。
この書き方なら、グリッドの列数が自動的に調整されるので、隙間の計算も簡単になるんですよね。
デバイス幅に応じて勝手に適応してくれるので、ほんまに便利です。

注意点としては、古いブラウザだとgapが対応していない場合があります。
ただ今は IE11 を除いてほぼ全てのモダンブラウザで対応しているので、安心して使って大丈夫ですよ。

まとめ

gapプロパティを使うことで、グリッドレイアウトの隙間を簡潔に、そして確実にコントロールできます。
僕も現場で毎日のように使ってますし、これを覚えておくと「あ、もうmargin調整で悩まなくていいんだ」って気づけますよ。

最初はgapだけで統一隙間を作って、慣れてきたらrow-gapとcolumn-gapで細かく調整するといいですよ。
そしてメディアクエリで レスポンシブ対応もしっかりすれば、どんなデバイスでも見栄えの良いレイアウトが実現できます。