How can I show three columns per row?

I have been trying to show three columns per row. Is it possible using flexbox?

My current CSS is something like this:

.mainDiv { display: flex; margin-left: 221px; margin-top: 43px; } 

This code puts all content in a single row. I want to add a constraint to just shows three records per row.

4 Answers

This may be what you are looking for:

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

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

Even though the above answer appears to be correct, I wanted to add a (hopefully) more readable example that also stays in 3 columns form at different widths:

.flex-row-container { background: #aaa; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .flex-row-container > .flex-row-item { flex: 1 1 30%; /*grow | shrink | basis */ height: 100px; } .flex-row-item { background-color: #fff4e6; border: 1px solid #f76707; }

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>

Hope this helps someone else.

Try this one using Grid Layout:

.grid-container { display: grid; grid-template-columns: auto auto auto; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); padding: 20px; font-size: 30px; text-align: center; }

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>

You can now use grid-auto-flow

CSS

.grid-flow { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); } 

Note - the repeat(3, 1fr) means '3 columns, each taking up 1 (equal) fraction of the available space.

HTML

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> 

Result