How can I wrap divs?

user_257583 0
Viewed 23898

Basically, I want the inner divs outside the outer div to wrap according to the width of the outer div, which in turn expands and contracts according to the width of the browser window, like so:

.---------------------.
|                     | <-- Browser Window
| .-----------------. |
| |  ,-,  ,-,  ,-,  | |
| |  |X|  |X|  |X|  | |
| |  `-`  `-`  `-`  | |
| |                 | |
| |  ,-,  ,-,  ,-,  | |
| |  |X|  |X|  |X|  | |
| |  `-`  `-`  `-`  | |
| `-----------------` |
|                     |
`---------------------`

.-------------------------------.
|                               | <-- Browser Window enlarged
| .---------------------------. |
| |  ,-,  ,-,  ,-,  ,-,  ,-,  | |
| |  |X|  |X|  |X|  |X|  |X| <----- Inner divs wrap around accordingly, as if
| |  `-`  `-`  `-`  `-`  `-`  | |     they are text
| |                           | |
| |  ,-,                      | |
| |  |X|                      | |
| |  `-`                      | |
| `---------------------------` |
|                               |
`-------------------------------`

What would be the best (as in simplest in terms of developer time) way to make this happen?

layout css html javascript
4 Answers

Not sure why hasn't anyone mentioned flex-wrap CSS property:

display: flex;
flex-wrap: wrap;
flex-direction: row;

For my case this does exactly what the OP asked. And it lets me use flexbox, too.

user_134595880
Related