How to show three columns per row with CSS?

To show three columns per row with CSS, we use flexbox.

For instance, we write

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

to add nested divs.

then we write

body > div {
  background: #aaa;
  display: flex;
  flex-wrap: wrap;
}

body > div > div {
  flex-grow: 1;
  width: 33%;
  height: 100px;
}

body > div > div:nth-child(even) {
  background: #23a;
}

body > div > div:nth-child(odd) {
  background: #49b;
}

to make the outer div a flex container with display: flex;.

We add flex-wrap: wrap; to make the content wrap to the next row if they overflow the row.

Then we remove spaces between the inner divs flex-grow: 1;.

And we make each div fill 1/3 of the outer div with width: 33%;.