Hacker News Reader

Comment by yroc92 | Hacker News Reader

I've really enjoyed CSS Grid, to the point where I wonder how I ever got by without it. It makes managing complex layouts, or even simple, much easier to manage and control.

View on HN

What does it make easy for you over flexbox?

They serve different purposes, and you'll often want to use both for different pieces of the layout. Flexbox is for laying things out in one dimension, Grid is more for two-dimensional ones.

This video might help show the difference (and all the Layout Land videos are great if you want to look more into CSS grid): https://www.youtube.com/watch?v=hs3piaN4b5I

I really don't get this argument. Not only is it easier IMO to layout things in one-dimension with CSS grid, but there are subtle bugs that occur on different platforms if you have Flexbox and Grid nested within each other. Just stick with Grid all the time and make your life easier.

I often use flexbox just for this:

display: flex; justify-content: center; align-items: center;

I just change “flex” to “grid”. It has the same result and it can be grids all the way down. I’ve seen issues on mobile platforms when containing grids in flex boxes.

What kind of issues should I be looking out for? I've not seen them yet.

While the two have some divergence in what they are intended to solve for, grid-row-gap and grid-column-gap (or grid-gap) are the biggest day-to-day wins with grid. I had a fairly straightforward hack using negative margins and calc() to get spacing with flexbox, but the built-in support for it in grid makes it feel hacky and cumbersome to go back.

Grid's fr (fractional) units also make the old percentage-based format for responsive sizing feel unwieldy in comparison.

You get it. Grid-gap is so powerful and I can never go back to flexbox even for 1-dimensional stuff. My favorite is using minmax() to control responsive overflow.

How do you approach IE11? Grid or fallback?

Reply on news.ycombinator.com