3 items per row with flexbox and gap

Question

I want to have 3 children per row. When using inline-flex and grid (or margin/padding), the flexbox wraps to 2 children per row. It seems like the grid width is being factored into the width of each child. Without changing the HTML, is there any way to fix this? I would like to keep the same 10px of spacing between each child, have the parent horizontally centered within the body, and keep each child to a width of 33.3333%.

The reason I am not just changing it to flex-basis: calc(33.3333% - 10px); or similar is because this is not an exact solution. The images on the edges of the parent div will not always be 10px from the edges of the widow.

Thanks in advance!

Here is my code:

body {
  background-color: lightgreen;
  margin: 10px;
}

.parent {
  width: 100%;
  background-color: coral;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
}

.child {
  flex-basis: 33.3333%;
}

<div class="parent">

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

</div>

score 6 · Accepted Answer · answered Sep 15 '21 at 11:39

Use CSS-Grid instead?

body {
  background-color: lightgreen;
  margin: 10px;
  text-align:center;
}

.parent {
  display: inline-grid;
  width:80%;
  background-color: coral;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.child img {
  width: 100%;
  min-width: 0;
}

<div class="parent">

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg">
  </div>

</div>

Thanks! Do you know how to get rid of that small margin at the bottom of each item? — Jack Welch, Sep 16 '21 at 08:28
Set display: flex; for all direct containers of images (div with class "child" in this case) — David Voráč, May 19 '23 at 17:18

3 items per row with flexbox and gap

1 Answers1