Best Practices with CSS Grid Layout | Hacker News Reader

Best Practices with CSS Grid Layout

smashingmagazine.com

163 pointsfagnerbrack40 comments

I'm reading the comments and I think there's a lot of misunderstanding about what CSS Grid is. Mostly because the spec is big and there's not just one way to do things, so it gets mixed with flexbox and tables.

I recommend watching last year's Morten's CSS grid presentation[1] as it has convinced me to stop using other layouts/frameworks and just embrace grid, which is truly amazing and it has been a blast working with it and making responsive websites without worrying too much about the markup.

1: https://www.youtube.com/watch?v=txZq7Laz7_4

Is it still the case that one realistically needs to write their layout in flexbox as a fallback? Last I checked grid support was about 87% globally. I learned grid at one point but then just ignored it on the basis that if I had to write everything in flexbox already, why do both? Would love to know if this is a false assumption.

Use a simple mobile-first layout, then add "@supports (display: grid)" to enhance the layout for browsers that support grid.

Mobile OS browsers and IE 10 will get a usable experience that way without having to write flexbox fallbacks.

“Internet Explorer + CSS Grid????”

https://www.youtube.com/watch?v=7msERxu7ivg

MDN: Using feature queries

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...

> “Internet Explorer + CSS Grid????”

well the original css grid spec actually did came from microsoft (https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/)

That's why it's only partial supported, they never updated it to the current version.

I think the point is, you have to write the fallback anyway. There really is no "enhanced", as they are two different ways to reach the same solution. The user won't notice a difference, and no sane person wants to do the same thing twice just because one method is slightly cleaner.

This is why CSS grids have been a nonstarter for most of us.

It depends if your use case accepts that a site can look different in older browsers. You don't have to write a fallback if people are okay with that.

If your project's stakeholders are prepared to accept that IE 10/11 users won't see the same as Chrome users (I use, “in the same way that those on mobile won't see the same as those on desktop, older browsers such as IE 10 will also see a simpler layout”), then progressively enhancing a mobile layout with CSS Grid is a fine approach.

I accept that this can't always be the case, though. But I don't consider CSS Grid a non-starter for most sites. Browser support is now good enough that I look to use it wherever possible, and try to educate people still stuck in pixel-perfect across all devices -land.

Isn’t ie11 incompatible with the official grid spec?

Yes — I should have written IE10/11. Neither supports @supports, though, so that's still a good way to progressively enhance for grid.

Unfortunately we’ll need to build our new site to look nice for IE11, too, as the stakeholders are locked on windows7.

That's unfortunate and likely will require a flexbox/float-based fallback.

Suzy Grids 2 is float based, a pleasure to work with and covers the old browsers. I'd love to switch to CSS grids but will have to wait another 5 years it seems.

Depending on your use case, you might get away with building your layout for mobile and then grid-ifying it for larger devices. That way those browsers that don't support grid will get the mobile version.

Really nice idea. Never though about this one. And since mobile browser are usually the ones with old engines, it make sense twice.

Eleven years ago I was freelance/part-time web developer, specialised in frontend work. If somebody from the future had shown me this comment (quoted below), even though I'd have no idea what "flexbox" or "grid" means, I'd understand, smile and say plus ça change, plus c'est la même chose ...

> Is it still the case that one realistically needs to write their layout in flexbox as a fallback? Last I checked grid support was about 87% globally. I learned grid at one point but then just ignored it on the basis that if I had to write everything in flexbox already, why do both? Would love to know if this is a false assumption.

It was still true 2 months ago. I did the same as you and stop using it.

Here's a list of existing bugs that prevent me using it in production https://github.com/rachelandrew/gridbugs

flexbox was not created for, and should not be used for, page layout. It's to be used for for a series of elements that flow in one direction only and designed for sections of a page, not a whole page.

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.

What does it make easy for you over flexbox?

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.

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.

How do you approach IE11? Grid or fallback?

I don’t write client side browser code these days any more, but when I did back in the 2000s, I remember people bashing using tables for layout, and how everyone should switch to CSS.

From quick googling of what CSS Grid Layout is, seems to be like we’re back to using tables, we just offload it to the style sheet.

I've mostly been a frontend dev since the late 1990s. CSS Grid does feel like building with tables in some respects. You don't suffer the problems tables had though, like the close coupling of layout to HTML, the necessity to have a tag for every cell, the rigid order of cells, or the spacer gifs to stop things collapsing. CSS Grid gives you the formality of a proper grid system with some really nice features for spacing, placement and ordering the content. Plus, in Grid, cells can overlap with other cells, so it's fairly easy to make some really clever designs that look great. It's been very well thought out, and it works.

I really wouldn't want to go back to even plain Flexbox now, let alone floating elements, tables, or any other layout system.

The tables bashing was because it resulted in tag soup, even though it was conceptually easy.

This doesn't suffer from the same problem.

The tables bashing was because of the common view that CSS and HTML, the styling and markup, should be separated. It wasn't due to tag bloat, which has remained common with HTML regardless (we still have a million div tags in the place of table/td/tr).

<table> is a rigid display value taking up an entire tag. So the argument is why not push that into the CSS eg in a div instead and get rid of an entire unnecessary tag. This is why display:table doesn't get the same kind of hate thrown at it that <table> does.

So in effect it was fashion mixed with politics disguised as a technical discussion...

Tables are not 'tag soup'.

10 tables to display 1 header, 1 footer, 2 lines of text and 1 image in an email is 'tag soup'.

“Tag soup” doesn’t mean “bad markup”. It specifically refers to when you write HTML as a series of commands and the result is a bunch of tags that aren’t nested properly and don’t result in a tree structure. Things like <b><i>…</b></i>.

So they should’ve added new tags for layout, instead of table,tr,td,th ?

Much like yield vs await in Python3 asyncio.

In the Python 2.7 days, people used generator functions to implement async in Python. When Python3 first came out, you couldn’t do both generator and async in the same function. I assume it’s because they used the same mechanism internally.

I think it was Python 3.5 which added support for async generators.

I don't believe python 2.7 could ever do async. Async was only possible in 3.3 when `yield from` landed and then was bastardized into coroutines through decorators.

3.5 released true asnyc/await based on the `yield from` form and then 3.6 allowed for async generators.

You were close and your point remains. Although I don't think new tags are the right choice. I think HTML learnt a while ago that more tags doesn't solve everything.

I do really enjoy python async. It's cool to see a feature develop from a hack like that but a language first approach could have avoided some headaches. This is where Grid wins, it's a fresh take without requiring to maintain backwards compatibility with previous attempts.

I think the philosophical difference is meant to be that in HTML tables the layout was part of the markup (and so had -- or should have had -- semantic meaning) whereas with CSS Grid the table layout is part of the styling. This is alluded to in TFA's section on accessibility.

For devs who don't care so much about accessibility, and are more just interested in getting the layout they want, I guess that argument may not resonate so much. I personally don't care much for taxonomic/teleological arguments around REST methods, but I'm a bit more willing to follow fashion with Grid if it means people on screen-readers will have a better time.

No, it is not the same. You should at least try it out before you make blanket statements like that.

<table> is not grid. <table> is a fixed container. grid does not. <table> is HTML. grid is CSS. The structure does not change when using CSS.

> back in the 2000s, I remember people bashing using tables for layout, and how everyone should switch to CSS.

> seems to be like we’re back to using tables, we just offload it to the style sheet.

which solves exactly the issue that people were "bashing" about.

Reply on news.ycombinator.com