5 ms·

Rethinking CSS Grids

60 points by bretthopper 15y ago

yxhuvud 15y ago
Here is a proposal for people that wish to suggest good ways of doing layout, that will make it at least somewhat possible that someone might take you serious: DO NOT USE GRAY TEXT ON A WHITE BACKGROUND.
wccrawford 15y ago
Is it just me, or are the examples in the middle using 'md' and 'fr' wrong? If they're not wrong, why are they so bloody confusing? Edit: It's been fixed now. The final example had 2md, 1fr, 1md originally, instead of the 3md, 1fr, 2md that it has now.
- grayrest 15y ago
  The 'fr' unit is "fraction of available space" and comes from the w3c proposal. I believe the second example is incorrect in that the 1fr column should be 7md wide.
necolas 15y ago
There is so much thought, and so many concerns, that go into CSS modules that I'm a little disappointed the article doesn't go into more detail about the problems it is looking to solve. A fundamental starting point seems to be that CSS grids should match the mental model and terminology of "designers" rather than "developers". It would be good to have a thorough explanation of why that may or may not be an improvement. How would added abstraction effect development? How would the functionality of the existing CSS Grid Layout proposal be mapped to, or improved, with an alternative syntax? Hopefully the ideas in the article have already been shared with the community of people working on CSS modules. It would be good for the concerns and approaches of various professions to be exchanged in a constructive fashion so that any future CSS modules are as good as can be.
- grayrest 15y ago
  Graphic Design Grids (GDG) are about creating a unified layout with a rigid horizontal and vertical rhythm. The CSS Grid Layout (CSSG), on the other hand, are more about creating a flexible 2d layout. You can make CSSG do the same thing as GDG (I think using grid-column-sizing and grid-row-sizing and then using either grid-template or grid-*-span) but it's not necessarily obvious. This is a request for the ability to define an arbitrary unit of measure with gutters called a module and be able to use it as part of CSSG. I like this and have experimented with as part of sass/stylus grid systems. Most of the rest is a complaint about terminology and I get slightly confused from there. IMO the `grid-x-count` property serves no purpose. Simply using `width` with and md unit value or an appropriate grid sizing definition would serve the same purpose. I'm also not sure how columns and fields interact. I think it's the same as `grid-columns` and `grid-rows` from the CSSG proposal and this is an extended part of his complaint that the CSSG terminology doesn't match up with GDG terminology.
benjash 15y ago
I don't understand the fuss about grids, well its graphic design lesson 1. Plus I would never use a framework for generating CSS.
- fredoliveira 15y ago
  I don't understand the fuss about grids, well its graphic design lesson 1. The fuss about grids is that they make sense on the web and there's no actual, proper, standard way to create and use them yet. Sure, if you know your way around CSS you can effectively create a grid-system for a site (and with media-queries you can make it flexible enough to support multiple devices), but the fact that it isn't a standard (despite being, as you said, graphic design lesson 1) means there's lots of work to do. So it isn't really about making a fuss (although for some people talking about grids is indeed still in-fashion). It's about working towards making/using grids on the web easy for everyone and not just those of us know know the inner workings of the box-model, DOM and CSS. We'd still be riding horses if Ford didn't make a "fuss about cars".
  - fredoliveira 15y ago
    (Please forgive this slight vent/derail, but HN is becoming a strange place when I get downvoted for voicing my opinion in a honest and respectful way. Heck, I said absolutely nothing that can be construed as wrong. I'd love to know why it happened - different opinions? If so, add them to the discussion, don't be the silent guy getting away with downvoting other people's posts because they differ from your own point of view.)
    - wccrawford 15y ago
      Yes it is. You get downvoted here if someone doesn't like your post for any reason whatsoever. And now that nobody can see any numbers, they can't tell if you've gotten massively upvoted or not, either. In the past, I'm sure they'd have gone 'meh, no votes, don't worry about it' but now they can't/won't take that attitude simply because they don't know. So they downvote. It doesn't cost them anything and they feel better for having tried to silence an opinion or fact they don't like. Now, I'll be downvoted for being off-topic, and that's a whole 'nother story.
CoffeeDregs 15y ago
Perhaps a bit OT of TFA, but on the general topic: Were HTML 'tables' so widely and badly used and were they so corrupted as a term that the W3C had to create 'grids'? Is this kind of just an upgrade to tables?: http://dev.w3.org/csswg/css3-grid-align/ http://dev.w3.org/csswg/css3-grid-align/ How is a grid different than a table? I find it odd that that each element in the grid is explicitly positioned (e.g. #score { grid-column: 1; grid-row: 3 } ). It seems as though we've been round and round on this topic and I feel as though we're going to go round again some more when we could be improving the core elements (at the risk of some breakage). EDIT: some answers to my questions here: http://www.htmlgoodies.com/beyond/css/css3-preview-tables-and-grids.html http://www.htmlgoodies.com/beyond/css/css3-preview-tables-an... EDIT2: looks as though multiple client sizes are a driver.
- rimantas 15y ago
  Grids and tables are worlds apart. Grids live in CSS, tables live in HTML. If you don't care about IE<8 you can also use display: table-(row, cell) for positioning.
megaman821 15y ago
Doesn't this make resizing rows and columns horrible? Why not just pretend your grid-module is 1x1 and use flexible-box layout?
danboarder 15y ago
I think this has already been solved by tools like http://grids.heroku.com/ http://grids.heroku.com/
unicornporn 15y ago
this page crashes the stock android 2.2 browser every single time.

60 points by bretthopper 15y ago

Here is a proposal for people that wish to suggest good ways of doing layout, that will make it at least somewhat possible that someone might take you serious: DO NOT USE GRAY TEXT ON A WHITE BACKGROUND.

wccrawford 15y ago

Is it just me, or are the examples in the middle using 'md' and 'fr' wrong? If they're not wrong, why are they so bloody confusing? Edit: It's been fixed now. The final example had 2md, 1fr, 1md originally, instead of the 3md, 1fr, 2md that it has now.

grayrest 15y ago
The 'fr' unit is "fraction of available space" and comes from the w3c proposal. I believe the second example is incorrect in that the 1fr column should be 7md wide.

necolas 15y ago

There is so much thought, and so many concerns, that go into CSS modules that I'm a little disappointed the article doesn't go into more detail about the problems it is looking to solve. A fundamental starting point seems to be that CSS grids should match the mental model and terminology of "designers" rather than "developers". It would be good to have a thorough explanation of why that may or may not be an improvement. How would added abstraction effect development? How would the functionality of the existing CSS Grid Layout proposal be mapped to, or improved, with an alternative syntax? Hopefully the ideas in the article have already been shared with the community of people working on CSS modules. It would be good for the concerns and approaches of various professions to be exchanged in a constructive fashion so that any future CSS modules are as good as can be.

grayrest 15y ago
Graphic Design Grids (GDG) are about creating a unified layout with a rigid horizontal and vertical rhythm. The CSS Grid Layout (CSSG), on the other hand, are more about creating a flexible 2d layout. You can make CSSG do the same thing as GDG (I think using grid-column-sizing and grid-row-sizing and then using either grid-template or grid-*-span) but it's not necessarily obvious. This is a request for the ability to define an arbitrary unit of measure with gutters called a module and be able to use it as part of CSSG. I like this and have experimented with as part of sass/stylus grid systems. Most of the rest is a complaint about terminology and I get slightly confused from there. IMO the `grid-x-count` property serves no purpose. Simply using `width` with and md unit value or an appropriate grid sizing definition would serve the same purpose. I'm also not sure how columns and fields interact. I think it's the same as `grid-columns` and `grid-rows` from the CSSG proposal and this is an extended part of his complaint that the CSSG terminology doesn't match up with GDG terminology.

benjash 15y ago

I don't understand the fuss about grids, well its graphic design lesson 1. Plus I would never use a framework for generating CSS.

fredoliveira 15y ago
I don't understand the fuss about grids, well its graphic design lesson 1. The fuss about grids is that they make sense on the web and there's no actual, proper, standard way to create and use them yet. Sure, if you know your way around CSS you can effectively create a grid-system for a site (and with media-queries you can make it flexible enough to support multiple devices), but the fact that it isn't a standard (despite being, as you said, graphic design lesson 1) means there's lots of work to do. So it isn't really about making a fuss (although for some people talking about grids is indeed still in-fashion). It's about working towards making/using grids on the web easy for everyone and not just those of us know know the inner workings of the box-model, DOM and CSS. We'd still be riding horses if Ford didn't make a "fuss about cars".
- fredoliveira 15y ago
  (Please forgive this slight vent/derail, but HN is becoming a strange place when I get downvoted for voicing my opinion in a honest and respectful way. Heck, I said absolutely nothing that can be construed as wrong. I'd love to know why it happened - different opinions? If so, add them to the discussion, don't be the silent guy getting away with downvoting other people's posts because they differ from your own point of view.)
  - wccrawford 15y ago
    Yes it is. You get downvoted here if someone doesn't like your post for any reason whatsoever. And now that nobody can see any numbers, they can't tell if you've gotten massively upvoted or not, either. In the past, I'm sure they'd have gone 'meh, no votes, don't worry about it' but now they can't/won't take that attitude simply because they don't know. So they downvote. It doesn't cost them anything and they feel better for having tried to silence an opinion or fact they don't like. Now, I'll be downvoted for being off-topic, and that's a whole 'nother story.

CoffeeDregs 15y ago

Perhaps a bit OT of TFA, but on the general topic: Were HTML 'tables' so widely and badly used and were they so corrupted as a term that the W3C had to create 'grids'? Is this kind of just an upgrade to tables?: http://dev.w3.org/csswg/css3-grid-align/ http://dev.w3.org/csswg/css3-grid-align/ How is a grid different than a table? I find it odd that that each element in the grid is explicitly positioned (e.g. #score { grid-column: 1; grid-row: 3 } ). It seems as though we've been round and round on this topic and I feel as though we're going to go round again some more when we could be improving the core elements (at the risk of some breakage). EDIT: some answers to my questions here: http://www.htmlgoodies.com/beyond/css/css3-preview-tables-and-grids.html http://www.htmlgoodies.com/beyond/css/css3-preview-tables-an... EDIT2: looks as though multiple client sizes are a driver.

rimantas 15y ago
Grids and tables are worlds apart. Grids live in CSS, tables live in HTML. If you don't care about IE<8 you can also use display: table-(row, cell) for positioning.

megaman821 15y ago

Doesn't this make resizing rows and columns horrible? Why not just pretend your grid-module is 1x1 and use flexible-box layout?

danboarder 15y ago

I think this has already been solved by tools like http://grids.heroku.com/ http://grids.heroku.com/

unicornporn 15y ago

this page crashes the stock android 2.2 browser every single time.