gapプロパティでflexboxやgridに余白を入れる方法

要素間の余白を簡単に設定できるgapプロパティの使い方を紹介します。

基本的なgapプロパティの使い方

gapプロパティは、FlexboxやGridコンテナ内の要素間の余白を指定するためのCSSプロパティです。これにより、要素間のスペースをmarginを使わずに簡単に設定できるようになります。

gapプロパティの構文は以下のようになります。

.container {
  display: flex; /* または display: grid; */
  gap: 20px; /* 任意の値を指定 */
}

例えば、以下のようなHTMLとCSSがあったとします。この場合、box要素間に20pxの余白が自動的に追加されます。

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

.container {
  display: grid;
  gap: 20px;
}

.box {
  background-color: #f0f0f0;
  padding: 10px;
}

Flexboxとgapプロパティを組み合わせることで、簡単にレスポンシブデザインを実現できます。例えば、以下のようなCSSを考えてみましょう。この場合、画面の幅に応じてbox要素のカラム数が変化します。

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.box {
  flex: 1 0 200px;
}

gapプロパティを使うと、画像などの要素を簡単にグリッド状に配置できます。

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

この記事では、gapプロパティを使った余白の実装方法を紹介しました。FlexboxやGridと組み合わせることで、レイアウトの調整やレスポンシブデザイン、モザイクレイアウトなど、様々な使い方ができるのでぜひ試してみてください。

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ