4 ms·
I don't know what he's done, but I think an obvious use case is this grid list: https://codepen.io/anon/pen/xNNXBR https://codepen.io/anon/pen/xNNXBR Basically
by rossy 7y ago
I don't know what he's done, but I think an obvious use case is this grid list: https://codepen.io/anon/pen/xNNXBR https://codepen.io/anon/pen/xNNXBR
Basically, a list of items arranged in a grid where the number of columns is dynamic depending on the width, items are wrapped dynamically from left to right, each column consumes the maximum amount of space, there's a fixed gap between columns, and the last row is aligned left, not stretched. I had to build one recently, and it was a perfect fit for grid.
- codedokode 7y agoCannot this be done with just floats or inline-blocks and percentage width? Unlike grid, it would work in a larger number of browsers. Also, I think that tutorials for things like flexbox or grid should include fallbacks for older browsers. Because generally frontend devs simply copy the code from tutorial so if you don't include the fallback, they won't implement it.
- lpa22 7y agoThe support for grid is very good for the vast majority of modern applications[1], given its power and the things it can simplify that often require JS solutions otherwise 1. https://caniuse.com/#search=Grid https://caniuse.com/#search=Grid
- rossy 7y agoNot if you want the columns to stretch to fill the remaining space, and you also want the number of columns to be dynamic. > Also, I think that tutorials for things like flexbox or grid should include fallbacks for older browsers. Well, a sensible fallback for that grid list example would be to inline-blocks with a fixed number of columns.
- codedokode 7y agoYou make a number of columns dynamic by setting different percentage widths on different page sizes.
- maaaats 7y agoBut then it's responsive to the page size, not the container size. That's a small, but important difference. For instance, I recently made a component to be included on other pages at work. It had to look good no matter the size the page gave it. So they might put it into a 400px wide container, on a 1600px wide page. If I used vw or media queries to draw it based on page size, it would behave wrong.
- SquareWheel 7y agoI was thinking about that problem earlier. Is there not a CSS unit for container size? If not, that seems like a very useful addition. Like a more embedded version of vw/vh.
- ZeikJT 7y agoPercent can be based on container depending on how the container size is set.
- SquareWheel 7y agoAh, of course you're right. Good point thank you.
- Ygg2 7y ago> Cannot this be done with just floats Every time a float is used a Servo dev gets another grey hair. Jokes aside, floats are Ok, but they make parallel layout from very hard to optimize, to no better than just using a single thread.
- sureaboutthis 7y agoSimilarly to tables, floats were not created for layout and shouldn't be used for layout anymore.
- ZeikJT 7y agoUnless of course you're talking about laying out an image alongside text.
- sureaboutthis 7y agoThat's not page layout as we're talking about. That is one of the proper uses of float.
- castis 7y agoIt absolutely could, but yikes... it's not necessary to put yourself through that these days.
- leeter 7y agoAFAIK every browser but IE11 supports the modern basic grid syntax. Edge has supported the new syntax since Edge 16 which is old enough to be widely deployed in enterprise now. So as far as I'm concerned that's the "Vast majority of browsers" and for static grids I just use the old syntax as a fallback for IE11 https://caniuse.com/#feat=css-grid https://caniuse.com/#feat=css-grid