A flexbox grid with three (3) rows and four (4) columns

Question

I have a div and I have 12 elements centered with flex.

But I just want to have 4 elements in a row, so I want 3 rows of 4 columns.

Is it ok to do with flex? And do you know how to do this?

I try to do it like this: https://jsfiddle.net/18mzsqcx/1/ , but it does not work.

Or is it better to just create a div, for example .col4 with a width equal to 25%, and some fields and put this .col4 class in each element?

 *, *:after, *:before { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .container { float: left; width: 100%; background-color: red; } .content { width: 94%; margin: 0px auto; background-color: yellow; padding: 30px; } .categories { display: flex; justify-content: space-between; background-color: blue; } .categories_item a { color: green; } .categories_item { flex-grow: 1; } 

 <div class="container"> <div class="div content"> <div class="categories"> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> </div> </div> </div> 

Answer 1

By default, the flex container is set to flex-wrap: nowrap . This means that flexible items cannot be wrapped in new lines.

So the first thing you need to do is add flex-wrap: wrap to your container.

 .categories { display: flex; justify-content: space-between; flex-wrap: wrap; /* NEW */ } 

Then define your flexibility elements so that only four can fit in a row.

Instead of this:

 .categories_item { flex-grow: 1; } 

Try the following:

 .categories_item { flex: 1 0 20%; margin: 5px; } 

modified demo

 *, *:after, *:before { margin: 0; padding: 0; box-sizing: border-box; } .container { float: left; width: 100%; background-color: red; } .content { width: 94%; margin: 0px auto; background-color: yellow; padding: 30px; } .categories { display: flex; justify-content: space-between; flex-wrap: wrap; /* NEW */ } .categories_item a { color: white; } .categories_item { flex: 1 0 20%; /* NEW */ margin: 5px; /* NEW */ background-color: blue; } 

 <div class="container"> <div class="div content"> <div class="categories"> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> </div> </div> </div> 

Answer 2

This will do the trick, save three elements in one div, so there will be 4 divs for 12 elements

 .container { float: left; width: 100%; background-color: red; } .content { width: 94%; margin: 0px auto; background-color: yellow; padding: 30px; } .categories { display: flex; justify-content: space-between; background-color: blue; } .categories_item a { color: green; } .categories_item { flex-grow: 1; } 

 <div class="container"> <div class="div content"> <div class="categories"> <div id="row"> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> </div> <div id="row"> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> </div> <div id="row"> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> <div class="categories_item"> <a href="" class=""> <span>Item</span> </a> </div> </div> </div> </div> </div>