4 ms·

Cannot 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 tutor

Cannot 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 ago
The 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 ago
Not 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 ago
  You make a number of columns dynamic by setting different percentage widths on different page sizes.
  - maaaats 7y ago
    But 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 ago
      I 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 ago
        Percent can be based on container depending on how the container size is set.
        SquareWheel 7y ago
        Ah, 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 ago
  Similarly to tables, floats were not created for layout and shouldn't be used for layout anymore.
  - ZeikJT 7y ago
    Unless of course you're talking about laying out an image alongside text.
    - sureaboutthis 7y ago
      That's not page layout as we're talking about. That is one of the proper uses of float.
castis 7y ago
It absolutely could, but yikes... it's not necessary to put yourself through that these days.
leeter 7y ago
AFAIK 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

lpa22 7y ago

The 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 ago

Not 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 ago
You make a number of columns dynamic by setting different percentage widths on different page sizes.
- maaaats 7y ago
  But 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 ago
    I 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 ago
      Percent can be based on container depending on how the container size is set.
      - SquareWheel 7y ago
        Ah, 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 ago
Similarly to tables, floats were not created for layout and shouldn't be used for layout anymore.
- ZeikJT 7y ago
  Unless of course you're talking about laying out an image alongside text.
  - sureaboutthis 7y ago
    That's not page layout as we're talking about. That is one of the proper uses of float.

castis 7y ago

It absolutely could, but yikes... it's not necessary to put yourself through that these days.

leeter 7y ago

AFAIK 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