CSS仅动态DIV宽度，即。 如果浏览器宽度允许，则每行更多DIV

Question

I'm making a layout to display blocks of content side-by-side in a way where the browser window is filled 100% with DIV blocks

I remember seeing a CSS only method that adjusts the width of DIVs depending on the browser window. If space allows, 3 DIVs are displayed, if you decrease the width of the browser, it will change to 2 DIVs per row, pushing the 3rd down, while keeping the DIVs at an ideal width always filling the window.

I've been trying to recreate this

Say I need a min-width of 500px. If there is 1000px available, it would show 2 blocks per row. If 1500px, 3 blocks per row, and so on. But based on how many blocks can fit, I need the width of each block was dynamic so as to keep the browser window filled.

Ive seen this done before exactly. I remember even with javascript disabled the effect could be seen, so I figure the answer must be CSS

Answer 1

You can use media queries to achieve what you want.

Basically set the jumps where you want to skip from 1 to 2, from 2 to 3 and from 3 to 4, etc. based on window width.

And put the width in %. This way the existing items will stretch to the available width.

If you want to fit 3 in a row, use width 33%, to fit 2 use width 50% and so on.

If you can't make them to break the line, you can use nth-child to force them.

Answer 2

Use media queries.

 /* Display 3 items per row for browsers with width >= 1024px */ @media (min-width: 1024px) { .items { width: 33.33%; } } /* Display 2 items per row for browsers with width >= 768px and width <= 1023px */ @media (min-width: 768px) and (max-width: 1023px){ .items { width: 50%; } } /* Display 1 item per row for browsers with width <= 767px */ @media (max-width: 767px){ .items { width: 100%; } }