Search code examples
htmlcssflexboxcss-grid

Equal width flex items even after they wrap

Is it possible to make a pure CSS solution like this:

  1. Items have some min-width.
  2. They should grow dynamically to fill all container width and then wrap to new lines
  3. All items on the list should have equal width.

This is how it looks now:

enter image description here

And this is how I would like it too look like (I've managed those bottom items' width manually just to show the expected result):

enter image description here

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

.item {
  background: yellow;
  min-width: 100px;
  height: 20px;
  text-align: center;
  border: 1px solid red;
  flex-grow: 1;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

Here is a fiddle demo.

Solution

  • Currently, flexbox offers no clean solution for aligning flexible items in the last row or column. It's beyond the scope of the current spec.

    Here's more information and various solutions people have used to get around the problem:

    However, last-row alignment is not a problem with another CSS3 technology, Grid Layout. In fact, it's very simple with this method (and requires no changes to the HTML):

    .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
}

.item {
  background: yellow;
  text-align: center;
  border: 1px solid red;
}
    <div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

    jsFiddle demo

    The grid-template-columns property sets the width of explicitly defined columns. The rule above is telling the grid container to create as many columns as possible (auto-fit), and each column's width will be a minimum of 100px and maximum of 1fr, which consumes remaining space (similar to flex-grow: 1). When there's no more space on the row, a new row is created.

    The grid-auto-rows property sets the height of automatically created rows. In this grid each row is 20px tall.

    The grid-gap property is a shorthand for grid-column-gap and grid-row-gap. This rule sets a 10px gap between grid items. It doesn't apply to the area between items and the container.

    Note that the settings above are all at the container-level. Unlike with flex items, we can remove the responsibilities for height, width and margin (to an extent) from grid items.