5 ms·

I have tried using CSS grid a few times, but my impression of it was... meh. The oppurtunities to use it are few in between, it doesn't bring much more to the t

by amenod 7y ago

I have tried using CSS grid a few times, but my impression of it was... meh. The oppurtunities to use it are few in between, it doesn't bring much more to the table than (nested) flex, and worst of all, I had huge problems understanding what I did a few months later, even though I have tried to do it properly (and after deciphering it, there was nothing that I would change). Did anyone have opposite experience? EDIT: OP's experience is of course different, for such customizable tables CSS Grid probably makes sense. My opinion applies more to generic layout.

acomjean 7y ago
Using Firefoxs grid debugger is supper helpful in figuring out what is going on. I enjoyed my limited use of it. My main question is how well it prints.
- amenod 7y ago
  Thanks for the tip, I didn't know that exists! For anyone else who is curious: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto...
chrismorgan 7y ago
My experience is that almost all of the early “CSS Grid lets you do this!” examples were either: ⓐ actually achievable with Flexbox in a non-contrived way; or ⓑ outright weird things that will seldom actually be desired, being more related to art direction than layout or similar. Since then, I have come across a few cases where Grid was used to advantage in a way that Flexbox couldn’t have matched—I’ve even written a couple myself. The main case I’ve found is responsive layout, where you want to do something like interleaving rather than just stacking of elements, as you scale down a two-dimensional layout. This is the use for one I’ve written: see the responsive design of the hero area on https://www.topicbox.com/ https://www.topicbox.com/ and how the video moves from the right into the middle of the content from the left column, which would be exceedingly painful to handle well without Grid, probably requiring absolute positioning and/or float. But mostly, I find Flexbox to be sufficient, with Grid very occasionally offering a nicer way of doing something that was already possible. It’s not uncommon for me to do things with Grid now, for work or in my own projects, but I confess that I normally have to lean heavily on docs on the grid-* properties when I’m getting started, which I don’t for Flexbox. I know its capabilities and thus when it might be applicable, but the actual syntax is too powerful and flexible, with too many ways of achieving similar and different results, and so it will take more use to internalise than most features, but Grid’s just not useful enough that I think most are likely to reach that threshold.
- SahAssar 7y ago
  > This is the use for one I’ve written: see the responsive design of the hero area on https://www.topicbox.com/ https://www.topicbox.com/ and how the video moves from the right into the middle of the content from the left column, which would be exceedingly painful to handle well without Grid, probably requiring absolute positioning and/or float. Wouldn't just flex ordering and wrapping do? like this: https://codepen.io/anon/pen/QRgoOR https://codepen.io/anon/pen/QRgoOR
  - chrismorgan 7y ago
    It depends on how thoroughly the widths and heights are known. In various constrained cases, what you suggest can work, but it’s always fragile and depends on certain layout constraints being met. I do like your use of the column direction and vertical wrapping; for some reason, I had always had in mind rows, which prevents you from doing things like vertical centring of the columns relative to one another. So I never did try that combination. I think it would narrowly meet our requirements now (which includes other landing pages with somewhat different hero content), but I don’t think it would have the first iteration of the design when I started using Grid, due to greater flexibility and variation of the heights of elements. At the least, the Grid solution is more robust. But I will downgrade my “exceedingly painful” judgement to “somewhat icky and fairly fragile”. Thanks for also supporting my point that most cases where Grid is used can be done with Flexbox!
- shripadk 7y ago
  > My experience is that almost all of the early “CSS Grid lets you do this!” examples were either: ⓐ actually achievable with Flexbox in a non-contrived way; or ⓑ outright weird things that will seldom actually be desired, being more related to art direction than layout or similar. The thing is once you "get" Grid you will never go back to any other layout. Here is one example (an extremely common layout: sidebar to the left stretching from top of the container to the bottom, header on top right, main in middle right and footer at the bottom right): <style> section { display: 'grid'; grid-template-areas: "sidebar header header" "sidebar main main" "sidebar footer footer"; } aside { grid-area: sidebar; } header { grid-area: header; } main { grid-area: main; } footer { grid-area: footer; } </style> <section> <aside>Sidebar</aside> <header>Header</header> <main>Main content</main> <footer>Footer</footer> </section> Notice how I did not have to define a bunch of "col-" or "row-" or explicitly specify percentages and flex properties to each child markup element to layout my grid? If I need a completely different layout, all I need to do is change the "grid-template-areas" in section style. I can swap the "sidebar" from the left side of the page to the right side without much effort. I don't even need to touch the markup at all (which I would have to if I was using Flexbox)! Example: <style> section { display: 'grid'; grid-template-areas: "header header sidebar" "main main sidebar" "footer footer sidebar"; } </style> Flexbox feels imperative while Grid feels declarative to me. Why would I want to use Flexbox over the convenience Grid provides? Grid does everything Flexbox does and then some! With Flexbox I would have to do all the calculations myself to achieve a layout that is now set in stone. Any changes would require me to either change the markup or change the calculations in each flex element or both. Grid on the other hand can be changed declaratively! I would just need to specify my layout and the rendering engine takes care of the rest! I don't need to change the markup! After working with Grid for a few months now I have come to the realisation that I have pretty much stopped wasting time on calculating and positioning layout and fiddling with deep nested markup. I can say with conviction that no other feature has given me this level of satisfaction. Kudos to the team that conceptualised Grid! To top it all, Grid takes care of accessibility issues one would face with Flexbox. Maybe you want a Sidebar to the right for people who aren't visually challenged but with Grid you can maintain the hierarchy for visually impaired users who rely on screen readers. For them, the Sidebar would always come before the content and not after. Flexbox is heavily dependent on how you place your markup which sucks from an accessibility point of view. With Grid, the layout declaration is completely dissociated with markup order (which is very important because you don't want to be juggling with both at once while setting your layout). Flexbox is tied to markup order which means any major changes would require you to mess with the CSS styles as well as the markup. If you have deeply nested markup you are in a whole world of pain! Just my two cents!
kaycebasques 7y ago
I’ve found grid-template-areas to be a powerful way to layout my page with one fell swoop.
JamesSwift 7y ago
I've had the exact opposite reaction, grid is a godsend. Grid fills a very specific role that flexbox cant: two-dimensional layout. Continue to use flexbox when you only need to control things in a single dimension, but once you need to control both dimensions grid makes things so much easier.
- theoh 7y ago
  I think grid is something graphic designers and typographers really drove. Grid layout is essentially a modernist typographic convention. Once you know it, it becomes completely logical.
  - davidivadavid 7y ago
    As someone who's always been using InDesign and other graphic design layout principles, CSS grid is pretty much the first time CSS layout and positioning makes sense to me.
macawfish 7y ago
I have the same reaction as you, not to grid though, to flexbox! Maybe you're overthinking grid and I'm overthinking flexbox? Cause grid is really simple to me: you define a grid and then you specify which area in the grid you want each child to span. I love it.
reaperducer 7y ago
For the projects I use, Flexbox gets it done 95% of the time. Just occasionally Grid is the better method. The only thing I can think of off the top of my head is that if you're doing something programmatically and don't know how many items will appear in a grid, then Grid is better because Flexbox doesn't handle orphans well. Some have suggested using the margin-right: auto; trick, but it doesn't always work if you have your elements even moderately styled with padding and borders and such. If there was something like justify-content: space-between left-hanging; or justify-content space-between right-hanging; that would be ideal.
irrational 7y ago
What do you use to layout your pages? Do you still use float/clear? Or do you still use tables for layout? Surely you are not trying to use Flexbox since Flexbox is really only designed for a single vertical or horizontal column of content.
- gedy 7y ago
  I'm not sure what you are talking about, as you can do responsive grids/columns with Flexbox. E.g. Bootstrap uses flex: https://getbootstrap.com/docs/4.3/layout/grid/ https://getbootstrap.com/docs/4.3/layout/grid/
  - irrational 7y ago
    That is an example of using a screwdriver to drive nails. Flexbox can be perverted to do grid layout, but it's not the right tool for the job and sooner or later you will hurt yourself.
deergomoo 7y ago
In my experience, grid is very useful for setting up the overall layout of your page, whereas flex is well suited to the content within each segment. For example, if you want to move your navigation/controls to the bottom of the screen on mobile devices for better ergonomics, it's far easier with grid than flex because you can specify a completely different layout at each breakpoint. With flex you often have to duplicate content in different areas of the screen, then conditionally hide/show them based on the current CSS breakpoint. This can have a negative effect on page load times, SEO, and overall complexity, as well as just being kinda gross. Another example: imagine you have a 2x2 layout, say a sidebar and top-bar that join in the top left quadrant. Keeping ([0,0], [1,0]), and ([0,0], [0,1]) the same height and width respectively, without specifying explicit heights or widths, is very difficult without grid. It might be impossible, but I'm not that great at CSS so I'm not 100%.
lewisl9029 7y ago
Grid gap is a killer feature for dynamic layout. It allows you to place items in a container and have them wrap dynamically when there's not enough space in the container, _with consistent spacing between the wrapped lines_. Using raw flexbox you'd have to resort to hacks with negative margins on the container (https://stackoverflow.com/questions/30887071/margin-top-only-when-the-flex-item-is-wrapped https://stackoverflow.com/questions/30887071/margin-top-only...), which often affects layout of the container in unpredictable ways, making it less than ideal for building reusable layout abstractions. A popular alternative is to resort to screen size media queries to set margins, but screen size doesn't always match whatever container you have to render content in, so you end up with very brittle layouts that need all their media queries adjusted when you move containers around and add elements that constrain the dimensions of the container like sidebars (or even worse, collapsible sidebars that change width dynamically).

by amenod 7y ago

acomjean 7y ago

Using Firefoxs grid debugger is supper helpful in figuring out what is going on. I enjoyed my limited use of it. My main question is how well it prints.

amenod 7y ago
Thanks for the tip, I didn't know that exists! For anyone else who is curious: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto...

chrismorgan 7y ago

My experience is that almost all of the early “CSS Grid lets you do this!” examples were either: ⓐ actually achievable with Flexbox in a non-contrived way; or ⓑ outright weird things that will seldom actually be desired, being more related to art direction than layout or similar. Since then, I have come across a few cases where Grid was used to advantage in a way that Flexbox couldn’t have matched—I’ve even written a couple myself. The main case I’ve found is responsive layout, where you want to do something like interleaving rather than just stacking of elements, as you scale down a two-dimensional layout. This is the use for one I’ve written: see the responsive design of the hero area on https://www.topicbox.com/ https://www.topicbox.com/ and how the video moves from the right into the middle of the content from the left column, which would be exceedingly painful to handle well without Grid, probably requiring absolute positioning and/or float. But mostly, I find Flexbox to be sufficient, with Grid very occasionally offering a nicer way of doing something that was already possible. It’s not uncommon for me to do things with Grid now, for work or in my own projects, but I confess that I normally have to lean heavily on docs on the grid-* properties when I’m getting started, which I don’t for Flexbox. I know its capabilities and thus when it might be applicable, but the actual syntax is too powerful and flexible, with too many ways of achieving similar and different results, and so it will take more use to internalise than most features, but Grid’s just not useful enough that I think most are likely to reach that threshold.

SahAssar 7y ago
> This is the use for one I’ve written: see the responsive design of the hero area on https://www.topicbox.com/ https://www.topicbox.com/ and how the video moves from the right into the middle of the content from the left column, which would be exceedingly painful to handle well without Grid, probably requiring absolute positioning and/or float. Wouldn't just flex ordering and wrapping do? like this: https://codepen.io/anon/pen/QRgoOR https://codepen.io/anon/pen/QRgoOR
- chrismorgan 7y ago
  It depends on how thoroughly the widths and heights are known. In various constrained cases, what you suggest can work, but it’s always fragile and depends on certain layout constraints being met. I do like your use of the column direction and vertical wrapping; for some reason, I had always had in mind rows, which prevents you from doing things like vertical centring of the columns relative to one another. So I never did try that combination. I think it would narrowly meet our requirements now (which includes other landing pages with somewhat different hero content), but I don’t think it would have the first iteration of the design when I started using Grid, due to greater flexibility and variation of the heights of elements. At the least, the Grid solution is more robust. But I will downgrade my “exceedingly painful” judgement to “somewhat icky and fairly fragile”. Thanks for also supporting my point that most cases where Grid is used can be done with Flexbox!
shripadk 7y ago
> My experience is that almost all of the early “CSS Grid lets you do this!” examples were either: ⓐ actually achievable with Flexbox in a non-contrived way; or ⓑ outright weird things that will seldom actually be desired, being more related to art direction than layout or similar. The thing is once you "get" Grid you will never go back to any other layout. Here is one example (an extremely common layout: sidebar to the left stretching from top of the container to the bottom, header on top right, main in middle right and footer at the bottom right): <style> section { display: 'grid'; grid-template-areas: "sidebar header header" "sidebar main main" "sidebar footer footer"; } aside { grid-area: sidebar; } header { grid-area: header; } main { grid-area: main; } footer { grid-area: footer; } </style> <section> <aside>Sidebar</aside> <header>Header</header> <main>Main content</main> <footer>Footer</footer> </section> Notice how I did not have to define a bunch of "col-" or "row-" or explicitly specify percentages and flex properties to each child markup element to layout my grid? If I need a completely different layout, all I need to do is change the "grid-template-areas" in section style. I can swap the "sidebar" from the left side of the page to the right side without much effort. I don't even need to touch the markup at all (which I would have to if I was using Flexbox)! Example: <style> section { display: 'grid'; grid-template-areas: "header header sidebar" "main main sidebar" "footer footer sidebar"; } </style> Flexbox feels imperative while Grid feels declarative to me. Why would I want to use Flexbox over the convenience Grid provides? Grid does everything Flexbox does and then some! With Flexbox I would have to do all the calculations myself to achieve a layout that is now set in stone. Any changes would require me to either change the markup or change the calculations in each flex element or both. Grid on the other hand can be changed declaratively! I would just need to specify my layout and the rendering engine takes care of the rest! I don't need to change the markup! After working with Grid for a few months now I have come to the realisation that I have pretty much stopped wasting time on calculating and positioning layout and fiddling with deep nested markup. I can say with conviction that no other feature has given me this level of satisfaction. Kudos to the team that conceptualised Grid! To top it all, Grid takes care of accessibility issues one would face with Flexbox. Maybe you want a Sidebar to the right for people who aren't visually challenged but with Grid you can maintain the hierarchy for visually impaired users who rely on screen readers. For them, the Sidebar would always come before the content and not after. Flexbox is heavily dependent on how you place your markup which sucks from an accessibility point of view. With Grid, the layout declaration is completely dissociated with markup order (which is very important because you don't want to be juggling with both at once while setting your layout). Flexbox is tied to markup order which means any major changes would require you to mess with the CSS styles as well as the markup. If you have deeply nested markup you are in a whole world of pain! Just my two cents!

kaycebasques 7y ago

I’ve found grid-template-areas to be a powerful way to layout my page with one fell swoop.

JamesSwift 7y ago

I've had the exact opposite reaction, grid is a godsend. Grid fills a very specific role that flexbox cant: two-dimensional layout. Continue to use flexbox when you only need to control things in a single dimension, but once you need to control both dimensions grid makes things so much easier.

theoh 7y ago
I think grid is something graphic designers and typographers really drove. Grid layout is essentially a modernist typographic convention. Once you know it, it becomes completely logical.
- davidivadavid 7y ago
  As someone who's always been using InDesign and other graphic design layout principles, CSS grid is pretty much the first time CSS layout and positioning makes sense to me.

macawfish 7y ago

I have the same reaction as you, not to grid though, to flexbox! Maybe you're overthinking grid and I'm overthinking flexbox? Cause grid is really simple to me: you define a grid and then you specify which area in the grid you want each child to span. I love it.

reaperducer 7y ago

For the projects I use, Flexbox gets it done 95% of the time. Just occasionally Grid is the better method. The only thing I can think of off the top of my head is that if you're doing something programmatically and don't know how many items will appear in a grid, then Grid is better because Flexbox doesn't handle orphans well. Some have suggested using the margin-right: auto; trick, but it doesn't always work if you have your elements even moderately styled with padding and borders and such. If there was something like justify-content: space-between left-hanging; or justify-content space-between right-hanging; that would be ideal.

irrational 7y ago

What do you use to layout your pages? Do you still use float/clear? Or do you still use tables for layout? Surely you are not trying to use Flexbox since Flexbox is really only designed for a single vertical or horizontal column of content.

gedy 7y ago
I'm not sure what you are talking about, as you can do responsive grids/columns with Flexbox. E.g. Bootstrap uses flex: https://getbootstrap.com/docs/4.3/layout/grid/ https://getbootstrap.com/docs/4.3/layout/grid/
- irrational 7y ago
  That is an example of using a screwdriver to drive nails. Flexbox can be perverted to do grid layout, but it's not the right tool for the job and sooner or later you will hurt yourself.

deergomoo 7y ago

In my experience, grid is very useful for setting up the overall layout of your page, whereas flex is well suited to the content within each segment. For example, if you want to move your navigation/controls to the bottom of the screen on mobile devices for better ergonomics, it's far easier with grid than flex because you can specify a completely different layout at each breakpoint. With flex you often have to duplicate content in different areas of the screen, then conditionally hide/show them based on the current CSS breakpoint. This can have a negative effect on page load times, SEO, and overall complexity, as well as just being kinda gross. Another example: imagine you have a 2x2 layout, say a sidebar and top-bar that join in the top left quadrant. Keeping ([0,0], [1,0]), and ([0,0], [0,1]) the same height and width respectively, without specifying explicit heights or widths, is very difficult without grid. It might be impossible, but I'm not that great at CSS so I'm not 100%.

lewisl9029 7y ago

Grid gap is a killer feature for dynamic layout. It allows you to place items in a container and have them wrap dynamically when there's not enough space in the container, _with consistent spacing between the wrapped lines_. Using raw flexbox you'd have to resort to hacks with negative margins on the container (https://stackoverflow.com/questions/30887071/margin-top-only-when-the-flex-item-is-wrapped https://stackoverflow.com/questions/30887071/margin-top-only...), which often affects layout of the container in unpredictable ways, making it less than ideal for building reusable layout abstractions. A popular alternative is to resort to screen size media queries to set margins, but screen size doesn't always match whatever container you have to render content in, so you end up with very brittle layouts that need all their media queries adjusted when you move containers around and add elements that constrain the dimensions of the container like sidebars (or even worse, collapsible sidebars that change width dynamically).