7 ms·

I hate that people use CSS Grid like this. For some reason, I see so many people reach for CSS Grid like it's the de facto solution for responsive design. This

I hate that people use CSS Grid like this. For some reason, I see so many people reach for CSS Grid like it's the de facto solution for responsive design. This is a bad design because you're tying the child elements to the grid layout of the parent. If you added an extra column in the grid, you'd have to go and adjust it for the full bleed elements. IMO a better solution would've been to just use a column layout with flex box, where the children are containers at standard sizes (e.g. full-bleed, 80-characters, etc.). Yes it adds like another tag or two, but it's semantically more sound. And from that extra markup we get a lot more flexibility, e.g. going from column layout to a slide show or something if someone wanted. CSS Grids are good for grids i.e. layouts where you want control over flow in both axes. This is not a grid. You have one column of data where you are controlling whitespace. This has become a real pet peeve of mine because it seems like so many people love css grid when it's actual use case is fairly rare. Edit: I also want to add that this creates an uglier layout if you have variable width children. Because you'd essentially create a full-bleed container element just to add a non-full bleed child to it. And I am sorry that this came across as kind of aggressive, this is something that's really been irking me with recent web dev trends. And I feel like a crazy person confused over why the world suddenly decided on Css Grid all day every day.

highwind 6y ago
This reminded me of days where we used <table> to do layout.
- rimliu 6y ago
  Anyone who have usee tables for layout (I have) knows that it is nothing like that.
asddubs 6y ago
there's virtue to having smaller isolated components when possible. kind of a weird example, but the other day I tried to make a huge table responsive (that needed to be paginated badly, but that was an issue out of my reach) - I found out that chrome actually maxes out at 1000 rows for display:grid, and then your layout just breaks. I converted it to flexbox and getting it to look the way I wanted was way easier than I expected, plus I could support ie11 without having to do the weird ms grid syntax. I imagine it's also faster for the browser
tekkk 6y ago
It's surprising how rarely I even consider using CSS grid and every time I do, I still figure out a way to do it with flexbox. Now this depends of course on what you are doing, but for simple things, and you should keep things simple more often than complicated, flexbox is still as valid as it was before. Maybe my layouts aren't as fancy as those who know how to neatly proportion their boxes with CSS grid using golden ratios, but I'm quite satisfied that they work and are easy to understand for anyone who knows a thing or two about flexboxes. Sometimes I might have to add an unnecessary wrapper, I admit that. But oh well.
- __sisyphus__ 6y ago
  I agree. Grid seemed great in theory, but in practice I almost never find myself using it. The number of use cases that flexbox doesn't satisfy is quite small, and the Grid syntax is a bit more tedious. It's just not worth the trouble most of the time.
ss3000 6y ago
Widespread flex gap support will probably eliminate 95% of grid usage in my apps today: https://caniuse.com/flexbox-gap https://caniuse.com/flexbox-gap And what a surprise, it's just Safari holding us back again. =_=
- Dahoon 6y ago
  The new IE.
  - russelg 6y ago
    Very disingenuous of you. IE was a trashfire because it refused to do anything in a standard way, meaning it had to be specially catered for. Safari is slow to follow the standards but at least its compliant. A engine that isn't Chrome is very essential for keeping the web open, especially since Firefox user share keeps going down.
    - asddubs 6y ago
      ie was also a trashfire because of the release/update model, holding the entire web back because it was so far behind standards (ie6 was actually ahead of its time on release, but then didn't get updated for ages). safari, especially on ios where you can't even get any other browser engines, and the safari version is tied to the operating system version, follows that same model with the same consequences. not as painful these days, since the web has come a long way already, but you can definitely see the parallels
      - keeganpoppen 6y ago
        unsure what part of this is cause for downvoting-- it is absolutely correct. it's not even invalidating other peoples' observations. people are weird (or ignorant (or both))... edit: oh and i guess now that i upvoted it it's not grey anymore xD
    - schwartzworld 6y ago
      Safari has absolutely ignored standards when it suits apple. That's why, for example, you can't rely on PWAs on Apple products.
exogen 6y ago
This alternative falls apart as soon as you want to put a border or box-shadow around the content column while still having full-bleed elements. Now you're limited to having it individually around each group of elements before/after any full-bleed content, instead of the entire set of content.
- kumarharsh 6y ago
  Not necessarily. I'm on mobile, so can't link to code right now, but here's how it would happen: You can have another .background element which spans all the rows (using grid-row-start and grid-row-end) and positioned in the centre column. Apply the shadows on it, and keep it before the content div in DOM order. That should do it.
  - deleted 6y ago
    [deleted]
chrisweekly 6y ago
You're not alone! I strongly prefer flexbox too. Besides the points you mention, excessive use of grids leads to "designing to the grid" instead of letting the content and context dictate flow. Tangent: I also remember doing ridiculous things with nested tables during the original browser wars (circa 2001?) and consider it a "first-world problem" to be choosing among standards-based styling mechanisms.
- artificial 6y ago
  The tables haven’t died for email layouts. Email presentation is horrific. Outlook with its special IE is oh so much fun.
  - kumarharsh 6y ago
    Outlook doesn't even have IE btw... It has a custom MS Word compliant HTML parser/renderer (Facepalm emoji)
    - artificial 6y ago
      You’re correct. They switched from IE to Word https://www.litmus.com/blog/a-guide-to-rendering-differences-in-microsoft-outlook-clients/ https://www.litmus.com/blog/a-guide-to-rendering-differences...
bmuon 6y ago
The parent-child problem you mention can be addressed with names. Children can say "grid-name: footer". This is just a hint for the parent to decide where to place it in the grid. Then the parent can use grid-template-areas to arrange its children. You no longer need to change the children if you're adding columns to the layout. (I agree with you on this simple layout)
atoav 6y ago
I like CSS grids for global layout stuff because of the layout flexibility it gives you when it comes to different screen sizes and orientations, without having to use js when you need to swap the order of things around (and at some point you will have to eventually unless it is a very simple page). This helps separating the markup from the styling even further so it is rather a good thing. I would — however — never had the idea to abuse it like that. Why not just limiting using max-width on your text-related tags? The only problem I ever had with that is that markdown generated HTML will wrap <img> into <p> if it follows the standard and as of now there is no CSS way of selecting p without child of type IMG or p only with child of type img..
- innocenat 6y ago
  max-width on text do have a problem: you cannot set margin on the them. Say, blockquote, unordered list, etc.
sleavey 6y ago
Could you show some example CSS for your alternative suggestion by any chance? I'm not quite sure what you mean about using flexbox this way.
frankzander 6y ago
Seems like you are the style police ;) According to the creators of the Grid you can use it for whatever you want however you want. So there is no right or wrong. The last yeas I often hear to voices saying "this is wrong do it so" or something until I realized, that a elegant way in CSS is mostly not adaptable from one html layout to another (across CMS ). So everyone has to find his own way to write clear code which is manageable. There is no gold path.
jstummbillig 6y ago
This displays a very mediocre grasp on, at the very least, web semantics and CSS Grid. (Also, an emotional disposition against a simple piece of web technology. Wild.) > This is a bad design because you're tying the child elements to the grid layout of the parent Apart from that sentence carrying very little internal logic and abusing the word "because", there is a simple fix to what, I think, is your point: Name your grid areas. There is absolutely nothing in CSS Grid specifications that urges you to fill in all the possible areas, or, in fact, any of the areas. Or make it 2D. If you can use it to solve your layout problem in an elegant way, that's a good thing. The solution in the linked article is semantically sound and elegant -- obviously far more elegant than the proposed alternative of adding control markup to every single child.
- lloydatkinson 6y ago
  I fail to see anything in your reply that disputes anything OP said
- Aeolun 6y ago
  You can use the same trick in a flexbox container? Set every * to max-width: 65ch and then have the same full-bleed class to go to width: 100%. I agree with OP that using grid for this is a bit misplaced. But realistically, it probably won’t be a problem.
  - joshwcomeau 6y ago
    This doesn't work because `65ch` means very different things depending on the font-size. You need to apply it to a parent class, so that it picks the base font size (I'm not actually sure how this works but in practice it seems to base it on the child <p> tag). I also don't like the idea of "reaching in" and setting widths on all children. Feels like this could cause problems, especially on replaced elements like images/videos. Not to mention that it just feels wrong when combined with a component architecture, where I might expect a <Heading> component to control its own destiny. In fairness, my solution also reaches in to apply a grid-column, but grid-column is a property that only makes sense when combined with a parent's `display: grid`. So it bothers me less. Enough people have brought this up that I wonder if I should have addressed it in the article... but then I realize, it's not my job to argue against or "disprove" all alternative ideas. I'm not claiming that my way is the best way, I'm just sharing a cool trick I found :)
anotheryou 6y ago
My use case would be to style markdown exports and it's really a pain to add divs everywhere and it screws with the timelessness of your document. A few years ago I used js to achieve full bleed.
ron0c 6y ago
I can tell you why I, a sys admin interested in dabbling in html/css for my own personal website, looked into CSS Grid.. Firefox Developer Start Page. Right there in the middle.

highwind 6y ago

This reminded me of days where we used <table> to do layout.

rimliu 6y ago
Anyone who have usee tables for layout (I have) knows that it is nothing like that.

asddubs 6y ago

there's virtue to having smaller isolated components when possible. kind of a weird example, but the other day I tried to make a huge table responsive (that needed to be paginated badly, but that was an issue out of my reach) - I found out that chrome actually maxes out at 1000 rows for display:grid, and then your layout just breaks. I converted it to flexbox and getting it to look the way I wanted was way easier than I expected, plus I could support ie11 without having to do the weird ms grid syntax. I imagine it's also faster for the browser

tekkk 6y ago

It's surprising how rarely I even consider using CSS grid and every time I do, I still figure out a way to do it with flexbox. Now this depends of course on what you are doing, but for simple things, and you should keep things simple more often than complicated, flexbox is still as valid as it was before. Maybe my layouts aren't as fancy as those who know how to neatly proportion their boxes with CSS grid using golden ratios, but I'm quite satisfied that they work and are easy to understand for anyone who knows a thing or two about flexboxes. Sometimes I might have to add an unnecessary wrapper, I admit that. But oh well.

__sisyphus__ 6y ago
I agree. Grid seemed great in theory, but in practice I almost never find myself using it. The number of use cases that flexbox doesn't satisfy is quite small, and the Grid syntax is a bit more tedious. It's just not worth the trouble most of the time.

ss3000 6y ago

Widespread flex gap support will probably eliminate 95% of grid usage in my apps today: https://caniuse.com/flexbox-gap https://caniuse.com/flexbox-gap And what a surprise, it's just Safari holding us back again. =_=

Dahoon 6y ago
The new IE.
- russelg 6y ago
  Very disingenuous of you. IE was a trashfire because it refused to do anything in a standard way, meaning it had to be specially catered for. Safari is slow to follow the standards but at least its compliant. A engine that isn't Chrome is very essential for keeping the web open, especially since Firefox user share keeps going down.
  - asddubs 6y ago
    ie was also a trashfire because of the release/update model, holding the entire web back because it was so far behind standards (ie6 was actually ahead of its time on release, but then didn't get updated for ages). safari, especially on ios where you can't even get any other browser engines, and the safari version is tied to the operating system version, follows that same model with the same consequences. not as painful these days, since the web has come a long way already, but you can definitely see the parallels
    - keeganpoppen 6y ago
      unsure what part of this is cause for downvoting-- it is absolutely correct. it's not even invalidating other peoples' observations. people are weird (or ignorant (or both))... edit: oh and i guess now that i upvoted it it's not grey anymore xD
  - schwartzworld 6y ago
    Safari has absolutely ignored standards when it suits apple. That's why, for example, you can't rely on PWAs on Apple products.

exogen 6y ago

This alternative falls apart as soon as you want to put a border or box-shadow around the content column while still having full-bleed elements. Now you're limited to having it individually around each group of elements before/after any full-bleed content, instead of the entire set of content.

kumarharsh 6y ago
Not necessarily. I'm on mobile, so can't link to code right now, but here's how it would happen: You can have another .background element which spans all the rows (using grid-row-start and grid-row-end) and positioned in the centre column. Apply the shadows on it, and keep it before the content div in DOM order. That should do it.
- deleted 6y ago
  [deleted]

chrisweekly 6y ago

You're not alone! I strongly prefer flexbox too. Besides the points you mention, excessive use of grids leads to "designing to the grid" instead of letting the content and context dictate flow. Tangent: I also remember doing ridiculous things with nested tables during the original browser wars (circa 2001?) and consider it a "first-world problem" to be choosing among standards-based styling mechanisms.

artificial 6y ago
The tables haven’t died for email layouts. Email presentation is horrific. Outlook with its special IE is oh so much fun.
- kumarharsh 6y ago
  Outlook doesn't even have IE btw... It has a custom MS Word compliant HTML parser/renderer (Facepalm emoji)
  - artificial 6y ago
    You’re correct. They switched from IE to Word https://www.litmus.com/blog/a-guide-to-rendering-differences-in-microsoft-outlook-clients/ https://www.litmus.com/blog/a-guide-to-rendering-differences...

bmuon 6y ago

The parent-child problem you mention can be addressed with names. Children can say "grid-name: footer". This is just a hint for the parent to decide where to place it in the grid. Then the parent can use grid-template-areas to arrange its children. You no longer need to change the children if you're adding columns to the layout. (I agree with you on this simple layout)

atoav 6y ago

I like CSS grids for global layout stuff because of the layout flexibility it gives you when it comes to different screen sizes and orientations, without having to use js when you need to swap the order of things around (and at some point you will have to eventually unless it is a very simple page). This helps separating the markup from the styling even further so it is rather a good thing. I would — however — never had the idea to abuse it like that. Why not just limiting using max-width on your text-related tags? The only problem I ever had with that is that markdown generated HTML will wrap <img> into <p> if it follows the standard and as of now there is no CSS way of selecting p without child of type IMG or p only with child of type img..

innocenat 6y ago
max-width on text do have a problem: you cannot set margin on the them. Say, blockquote, unordered list, etc.

sleavey 6y ago

Could you show some example CSS for your alternative suggestion by any chance? I'm not quite sure what you mean about using flexbox this way.

frankzander 6y ago

Seems like you are the style police ;) According to the creators of the Grid you can use it for whatever you want however you want. So there is no right or wrong. The last yeas I often hear to voices saying "this is wrong do it so" or something until I realized, that a elegant way in CSS is mostly not adaptable from one html layout to another (across CMS ). So everyone has to find his own way to write clear code which is manageable. There is no gold path.

jstummbillig 6y ago

This displays a very mediocre grasp on, at the very least, web semantics and CSS Grid. (Also, an emotional disposition against a simple piece of web technology. Wild.) > This is a bad design because you're tying the child elements to the grid layout of the parent Apart from that sentence carrying very little internal logic and abusing the word "because", there is a simple fix to what, I think, is your point: Name your grid areas. There is absolutely nothing in CSS Grid specifications that urges you to fill in all the possible areas, or, in fact, any of the areas. Or make it 2D. If you can use it to solve your layout problem in an elegant way, that's a good thing. The solution in the linked article is semantically sound and elegant -- obviously far more elegant than the proposed alternative of adding control markup to every single child.

lloydatkinson 6y ago
I fail to see anything in your reply that disputes anything OP said
Aeolun 6y ago
You can use the same trick in a flexbox container? Set every * to max-width: 65ch and then have the same full-bleed class to go to width: 100%. I agree with OP that using grid for this is a bit misplaced. But realistically, it probably won’t be a problem.
- joshwcomeau 6y ago
  This doesn't work because `65ch` means very different things depending on the font-size. You need to apply it to a parent class, so that it picks the base font size (I'm not actually sure how this works but in practice it seems to base it on the child <p> tag). I also don't like the idea of "reaching in" and setting widths on all children. Feels like this could cause problems, especially on replaced elements like images/videos. Not to mention that it just feels wrong when combined with a component architecture, where I might expect a <Heading> component to control its own destiny. In fairness, my solution also reaches in to apply a grid-column, but grid-column is a property that only makes sense when combined with a parent's `display: grid`. So it bothers me less. Enough people have brought this up that I wonder if I should have addressed it in the article... but then I realize, it's not my job to argue against or "disprove" all alternative ideas. I'm not claiming that my way is the best way, I'm just sharing a cool trick I found :)

anotheryou 6y ago

My use case would be to style markdown exports and it's really a pain to add divs everywhere and it screws with the timelessness of your document. A few years ago I used js to achieve full bleed.

ron0c 6y ago

I can tell you why I, a sys admin interested in dabbling in html/css for my own personal website, looked into CSS Grid.. Firefox Developer Start Page. Right there in the middle.