Unordered List That Acts Like Grid-Auto-Flow Dense

Unordered list that acts like grid-auto-flow dense

Flexbox is more suited for this - you can use a hacky flexbox solution that works by growing all the flex items in a flex line to fill the remaining space in the row:

use flex: 1 0 auto on the li flex items
use a pseudo element that fills the remaining space in the last row.

See demo below:

*,

*:before,

*:after {

  box-sizing: border-box;

}

body {

  margin: 20px;

  font-family: 'Open Sans', 'sans-serif';

  background-color: #fff;

  color: #444;

}

.interests {

  display: flex; /* wrapping flexbox */

  flex-wrap: wrap;

  padding: 0;

  margin: 0;

}

.interests li {

  list-style-type: none;

  display: inline-block;

  text-align: center;

  padding: 0 10px;

  border: 1px solid black;

  margin: 0 4px 8px 0;

  cursor: default;

  flex: 1 0 auto; /* added */

}

.interests:after {

  content: '';

  display: block;

  flex: 999; /* grow by a large number */

}

<ul class="interests">

  <li>Legumes</li>

  <li>Edible plants</li>

  <li>Edible fungi</li>

  <li>Edible nuts</li>

  <li>seeds</li>

  <li>Baked goods</li>

  <li>Breads</li>

  <li>Dairy products</li>

  <li>Eggs</li>

  <li>Meat</li>

  <li>Cereals</li>

  <li>Seafood</li>

  <li>Staple foods</li>

  <li>Prepared foods</li>

  <li>Appetizers</li>

  <li>Condiments</li>

  <li>Confectionery</li>

  <li>Convenience foods</li>

  <li>Desserts</li>

  <li>Dips</li>

  <li>Dried foods</li>

  <li>Dumplings</li>

  <li>Fast food</li>

  <li>Fermented foods</li>

  <li>chinese food</li>

  <li>Kosher food</li>

  <li>Noodles</li>

  <li>Pies</li>

  <li>Salads</li>

  <li>Sandwiches</li>

  <li>Sauces</li>

  <li>Snack foods</li>

  <li>Soups</li>

  <li>Stews</li>

</ul>

CSS Grid auto-flow dense only changes flow of narrow elements

Grid can't change order of element than way. As a solution I can suggest a little trick. Lats agree that our 3fr element will always be the last one in query. So at that point we could add to it some simple check using :nth-child()

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  grid-gap: 10px;
  margin-bottom: 100px;
}

.grid>div {
  height: 100px;
  background: #ddd;
}

.three {
  grid-column: 1 / 4;
  grid-row: 1; /* starts form the fist  row gap*/
}

.three:nth-child(4),
.three:nth-child(5),
.three:nth-child(6) {
  grid-row: 2;
}

.three:nth-child(7),
.three:nth-child(8),
.three:nth-child(9),
.three:nth-child(n+9) /* for any element position > 9 */ {
  grid-row: 3;
}

<div class="grid">
    <div></div>
    <div></div>
    <div class="three"></div>
  </div>
  
  <div class="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="three"></div>
  </div>      
  
  <div class="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="three"></div>
  </div>

grid-auto-flow in snake lines?

Here is an idea if we consider the fact that you will always have 3 rows:

.container {

  display:grid;

  grid-template-rows:20px 20px 20px;

  grid-auto-columns:20px;

  grid-auto-flow:column dense;

}

.container > div:nth-child(6n + 4) { grid-row:3; }

.container > div:nth-child(6n + 5) { grid-row:2; }

/*.container > div:nth-child(6n + 6) { grid-row:1; }  to illustrate the pattern but not needed */

/* Irrelevant styles */

.container {

  grid-gap:5px;

  counter-reset:num;

  margin:10px;

}

.container > div {

  border:1px solid;

}

.container > div:before{

  content:counter(num);

  counter-increment:num;

}

<div class="container">

  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

</div>

<div class="container">

  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

</div>

<div class="container">

  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

</div>

CSS Grid vs dynamic definition list autoplacement

This is the purpose of grid-auto-flow: dense

If specified, the auto-placement algorithm uses a “dense” packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items. ^ref

I have also simplified the code a litte:

body {

  font-family: sans-serif;

}

dl {

  display: grid;

  grid-gap: 0 1rem;

  grid-template-columns: 1fr 1fr;

  text-align: center;

  grid-auto-flow: dense;

}

dt {

  padding: 0.25rem 1rem;

  background: lightcoral;

}

dl > :nth-of-type(2n + 1) {

  grid-column: 1;

}

dl > :nth-of-type(2n) {

  grid-column: 2;

}

dd {

  margin: 0 0 1rem;

  padding: 0.25rem 1rem;

  background: lightcyan;

}

dd:nth-last-of-type(-n + 2) {

  margin-bottom: 0;

}

  <div id="app">

    <dl>

      <dt>Item 1</dt>

      <dd>Nunc ut quam at sem vehicula hendrerit sed vitae risus</dd>

      <dt>Item 2</dt>

      <dd>

        uisque a maximus mauris. Quisque metus quam, auctor ac porttitor.

      </dd>

      <dt>Item 3</dt>

      <dd>

        Aliquam varius est ac lectus malesuada, a sagittis arcu laoreet.

      </dd>

      <dt>Item 4</dt>

      <dd>Etiam et sapien at mi ultrices maximus vitae vel arcu.</dd>

    </dl>

  </div>

5 items per row, auto-resize items in flexbox

You are right in giving a flex-basis: 20% but you have to adjust for the 4px margin on each flex item for it to wrap properly.

Equal Width Flex items in the last row

Use flex: 0 1 calc(20% - 8px) - this means the item won't grow beyond 20% of width (adjusting for margin) and can shrink based on the container width. See demo below:

.container {
  background: gray;
  width: 600px;
  height: 200px; /* height given for illustration */
  display: flex;
  flex-flow: row wrap;
  position: relative;
}

.item {
  background: blue;
  margin: 4px;
  flex: 0 1 calc(20% - 8px); /* <-- adjusting for margin */
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS solution for random gap in unordered list

Try adding this rule:

#list-1 >li:nth-child(3n+4) {
    clear: left;
}

Unordered List That Acts Like Grid-Auto-Flow Dense