溝、ガター(Gutters)は、rowとcolumn双方向に用意された、グリッド間の余白です。

1つ1つのグリッドトラックの間に付く、余白になります。

以下の余白部分が、ガターに該当します。

ガター付与のプロパティがないFlexbox vs ガター付与のプロパティが用意されているCSSグリッド

実は、グリッド軸(Gird axis)のチャプターで取り組んだ、Flexboxの一次元の軸との比較の例で、ガターを付与する記述が、コードに含まれていました。

/* 他省略 */

.container-body {
  /* コンテナーに対する、CSSグリッドのスタイル */
  display: grid;
  /* ✅ columnとrowの2方向の軸を同時に操作している */
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;

  /* 👇 ガター付与 */
  grid-row-gap: 1em;

  /* 他省略 */
}

/* 他省略 */

そして、Flexboxの場合で実装したソースコードには、 「❌ rowアイテムに一括でギャップを与えるスタイルがFlexboxには無いので、marginで対処するしかない」 と書かれていた部分に気がつきましたか？

実は、Flexboxには、グリッドセル間の余白を定義するプロパティが、存在しません。

ということは、1つ1つのアイテム要素の周り、もしくはトラックの間に、marginを付与するなどして対応をするしかないのです。

確かに、共通するclass名を付与することで、複数のアイテムに共通するmarginを付与することはできますが、全て自分で用意しなければならないので、少し不便です。

その不便さを改善したのが、CSSグリッドのガターです。

Flexboxにも、溝、ギャップの考え方はあるのですが、ガター付与のためのプロパティはないので、つける場合に、人によって統一性がないという問題もありました。

しかし、CSSグリッドには、ガター付与のためのプロパティがあるので、その心配はありません。

CSSグリッド、ガター付与のプロパティ

ガターを付与するには、以下のプロパティが用意されています。

この3つとも、全て使用頻度の高いものなので、これからも活用する機会が多いでしょう。

以上が、CSSグリッドを学習していく上で、知っておきたい用語です。

次のチャプターからは、具体的にCSSグリッドで用意されているプロパティと値を、実例を見ながら学習していきます。