Unordered list that acts like grid-auto-flow dense

Question

Is it possible to create an unordered list of different sized items that have the properties of grid-auto-flow: dense? I currently have an unordered list of terms that fills my page from left and right and any term that can't fit gets pushed to the next line. However, this leaves gaps on the right side of the page which is not plesent for responsive designs (the list starts from the left). I looked at the flex-flow properties of flexbox, but I did not find anything that can mimic grid-auto-flow: dense.

Here's an example of the simple item list I am referring to:

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 20px;
  font-family: 'Open Sans', 'sans-serif';
  background-color: #fff;
  color: #444;
}

.interests {
  grid-column: 1 / -1;
  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;
  /*top,right,bottom,left*/
  cursor: default;
}

<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>

I have experimented with grid-template-columns and grid-auto-rows, but I cant seem to replicate how the li element wraps perfectly around the content+padding. max-content and min-content don't seem to work with template columns or auto-rows either.

Any input greatly appreciated. Thanks a bunch!

Answer 1

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>