How to show three columns per row with CSS?

Spread the love

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

For instance, we write


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%;.

Leave a Reply

Your email address will not be published. Required fields are marked *