Equal spacing between tiles

Question

Is it possible to display 8 tiles 250px x 250px with an equal gap between tiles (row and column). After spending hours trying to achieve the result i want, I have come to the conclusion that Flex will not work in this instance. I have a parent div and 8 child divs. Any suggestions would be greatly appreciated!

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-flow: row wrap;
  justify-content: space-between;
}

.children {
  border: 2px solid black;
  width: 250px;
  height: 250px;
}

<article class="parent">

  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>

</article>

score 2 · Accepted Answer · answered Feb 21 '21 at 16:56

Until the gap set of properties is available for flexbox, you'll need to hack your way to a solution.

It's simple with grid layout, however.

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, 250px);
  grid-auto-rows: 250px;
  grid-gap: 10px; <----- key rule
}
.children{
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

<article class="parent">
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
</article>

score 0 · Answer 2 · answered Feb 21 '21 at 17:18

You can achieve it with pure flex. Although, I would personally use CSS Grid like @Michael Benjamin's answer.

.parent {
  background: red;
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  justify-content: space-between;
}

.children {
  flex-basis: 245px;
  display: inline-block;
  background: green;
  margin-bottom: 10px;
}

<article class="parent">
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
</article>

Dynamic values example:

.parent {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  background: red;
}

.children {
  flex-basis: 45%;
  margin-bottom: 5%;
  background: green;
}

<article class="parent">

  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>
  <section class="children">tile</section>

</article>

This answer is to show that is possible and achievable. Again for these kind of layouts I would go with CSS Grid.

Equal spacing between tiles

2 Answers2