css グリッドレイアウト

Question

●やりたいこと
cssのグリッドレイアウトで、下記のような複数の<div="article">をcssのdisplay:flex;でタイル状にならべたいのですが、
添付画像のように、内側の水色の部分だけマージンや余白を持たせたいです。

<div class="result">
    <div class="article">記事</div>
    <div class="article">記事</div>
    <div class="article">記事</div>
    <div class="article">記事</div>
    <div class="article">記事</div>
        ...................
        ...................
</div>

css

.result {
  display:flex;
}

.article {
  width:18%;
  margin:1%;
}

どなたかご教授をお願いいたします。

添付のピンクの部分に余白をつけずに<div class="result">に四隅がピッタリくっつくイメージです。

Answer 1

gapプロパティで余白を設定できます。

gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA

一例です。

.result {
  display:flex;
  flex-wrap: wrap;
  gap: 4vw 5%;
}

.result .article {
  width:16%;
  background-color: gray;
}

Comments

[kakeshi]

ご回答ありがとうございます。
無事にgapで出来ました。

Answer 2

要素が一列になっているということでしょうか？

.result {
  display:flex;
  flex-wrap:wrap;
}

に変更してみてください。

Comments

[kakeshi]

ご回答ありがとうございます。
追記させていただきましたが、添付のようにピンクの部分が周りにピッタリとくっついて余白ができないイメージです。