CSS - margin between flex grid

Question

I have a simple grid layout created with flex, I want to have a grid of 3x3 blocks with a margin between each block.

If I add a margin it makes it 2x5.

How can I have it 3x3 with a margin between each block

.wrap{
  max-width: 1000px;
  border: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
}

.block{
  width: 33%;
  height: 100px;
  border: 1px solid red;
  margin: 5px;
}

<div class="wrap">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

if you use 32% width of block you have 3x3 – Simone Rossaini Jul 20 '20 at 07:36 — Simone Rossaini, Jul 20 '20 at 07:36

score 4 · Accepted Answer · answered Jul 20 '20 at 07:39

You can get your desired result by using a flexbox property justify-content: space-between; which takes up the remaining space of the elements and spreads that between them

so all I did is made the width slightly smaller than 33% so we have remaining space and added justify-content: space-between; to the wrapper

.wrap{
  max-width: 1000px;
  border: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.block{
  width: 30%;
  height: 100px;
  border: 1px solid red;
  margin-bottom: 15px;
}

<div class="wrap">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

score 1 · Answer 2 · answered Jul 20 '20 at 07:42

You can use the calc function to subtract the margin (10px = 5px on each side) and also specify box-sizing: border-box on all your HTML elements so you don't have to include the border in your calculations.

* {
  box-sizing: border-box
}

.wrap{
  max-width: 1000px;
  border: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
}

.block{
  width: calc(33.3333% - 10px);
  height: 100px;
  border: 1px solid red;
  margin: 5px;
}

<div class="wrap">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

CSS - margin between flex grid

2 Answers2