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

Question

I have a div and I have 12 items aligned at center using flex.

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

This is ok to do with flex? And do you know how to do?

I'm trying to do that like this: https://jsfiddle.net/18mzsqcx/1/, but it's not working.

Or it's better to just create a div for example .col4 with width equal to 25% and some margins and put this class .col4 in each item?

*,
*: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;
}

user_1842939 · Answer

Flex-grid makes life very simple for the grid.

HTML

CSS

.flex-grid {
  display: flex;
}
.flex-col {
  flex: 1;
}

https://jsfiddle.net/wh03p4s5/

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

3 Answers