Practical CSS Grid
Published 7 years, 8 months past…In the run-up to Grid support being released to the public, I was focused on learning and teaching Grid, creating test cases, and using it to build figures for publication. And then, March 7th, 2017, it shipped to the public in Firefox 52. I tweeted and posted an article and demo I’d put together the night before, and sat back in wonderment that the day had finally come to pass. After 20+ years of CSS, finally, a real layout system, a set of properties and values designed from the outset for that purpose.
And then I decided, more or less in that moment, to convert my personal site to use Grid for its main-level layout.
Me, writing for A List Apart, taking you on a detailed, illustrated walkthrough of how I added CSS Grid layout to meyerweb.com, while still leaving the old layout in place for non-Grid browsers. As I write this, Grid is available in the latest public releases of Firefox, Chrome, and Opera, with Safari likely to follow suit within the next few weeks. Assuming the last holds true, that’s four major browsers shipping major support in the space of one month. As Jen Simmons hashtagged it, it’s a new day in browser collaboration.
As I’ve said before, I understand being hesitant. Based on our field’s history, it’s natural to assume that Grid as it stands now is buggy, incomplete, and will have a long ramp-up period before it’s usable. I am here to tell you, as someone who was there for almost all of that history, Grid is different. There are areas of incompleteness, but they’re features that haven’t been developed yet, not bugs or omissions. I’m literally using Grid in production, right now, on this site, and the layout is fine in both Grid browsers and non-Grid browsers (as the article describes). I’m very likely to add it to our production styles over at An Event Apart in the near future. I’d probably have done so already, except every second of AEA-related work time I have is consumed by preparations for AEA Seattle (read: tearing my new talk apart and putting it back together with a better structure).
Again, I get being wary. I do. We’re used to new CSS stuff taking two years to get up to usefulness. Not this time. It’s ready right now.
So: dive in. Soak up. Enjoy. Go forth, and Grid.
Comments (11)
Just signed on to your new layout – want to read it but WHAT on earth have you done to the font???
It looks like 6 point on my desktop. [latest FF, W10]
Hope this is just an over-site and not a new trend that will continue – those of us with trifocals just can’t do it.
I haven’t changed the font family or size in more than a decade, dj. Can you share a screenshot? I want to make sure it’s not behaving as styled before I go meddling with things.
Great write up on grid.
Getting weird behavior viewing your website on Win7, chrome 57.0.2987.110. When I scroll the home page, see lots of blank white space, then missing content, and comment form isn’t workable.
Maybe it’s user error on my part, hard to describe what I’m seeing.
Am using Firefox to make this comment.
I went to archive.org and viewed an older website version on chrome and don’t see any of the same issues.
Hey, Norm—thanks! That page-blanking bug has been fixed for Chrome 58, and is almost certainly related to an add-on you have installed. See my previous post Chrome Grid Bug Update for more information.
Hmm, I‘ll be very careful before jumping in at high speed. I see quite a few height related bizarre things in Firefox, in that the height of the grid item is too short to contain the contents. IOW the grid item doesn’t grow enough to contain its kids, or the kids overflow the grid item. One case I could clearly identify: the grid item contains an image whose height is constrained by max-height (
img {max-height: some-valued }). Other ones I don’t know yet why. And for each case, there is no reason at all for the Firefox behaviour – Opera works as expected there.In all cases, the result is quite a messy layout with the content of grid items overlapping each other.
Your zeal is too soon. Grid is only ready in modern browsers. It still remains unusable in older browsers. “But who is using those? Every browser auto updates” Not true. For example, Firefox in Linux has issues with auto updating. I had to manually update Firefox from 50 to 52 before grid support could be realized.
The practical conclusion is that no matter how “ready” a new CSS feature is, it’s not really ready for production for at least 6 months to a year after release. You have to allow time for everyone to upgrade.
Of course this can be worked around using various methods but in my humble opinion that is time and effort wasted. If we’re talking about new sites, fine. But converting old sites? Wait until the world is ready so your code can be more efficient.
Just my opinion.
I disagree, Simba. I’m literally using Grid right now on meyerweb. Since you came here to comment, you experienced Grid in production on a public site. And those without Grid-enabled browsers experienced mostly the same thing, thanks to the old layout styles I didn’t throw away. That’s what the quoted-and-linked article is all about—how I added a simple grid to a live site without breaking the experience for browsers that have yet to be upgraded. Anyone here could do the same for sites under their control. You get the added capabilities of Grid right away, with more and more users silently receiving those benefits as they do upgrade over the next however-long-it-takes.
Hi Eric, I’ve read your page for years and I really like all things – personal and technical. I’m really keen on learning the Grid but my job as a teacher at a secondary school makes progress slow.
Just stumbled on (well, was pushed at by a newsletter) this nice little site letting you literally play around with grids:
http://cssgridgarden.com/
Enjoy!
Your site is working fine for me in Safari, Chrome, and Firefox on iOS 10.3 iPad. Jen’s lab page, however, is another issue – every layout with CSS Grid fails. Everything is 100% width with a standard margin, vertically stacked, with collapsed vertical margins. The Monopoly layout is a hot, scrambled mess. Granted, I’m 5 days late on an iOS update (10.3.1, Apple’s latest), but all three of my browsers updated within the last few days. I don’t get it.
Ideas? Comments? Urgent desire to form an angry mob armed with torches and pitchforks to come charging my home?
Cssgridgarden.com tells me in all three browsers that my browser “does not support CSS Grids,” and I should go download an up-to-date browser. (Hmmmmm… I wonder where I’ve heard that pretentious verbiage before…)
Do what are you doing here that Jen and the other guy aren’t? Because in the way *they* are using CSS Grids, it’s not worth my time and effort to study their work – every project I’ve been on since mid-2014 has been responsive, and their work fails in mobile at 1024 pixels.
I’ll take another look at them in a few days, after I’m back home and can use my main computer instead of an iPad, but I’m not confident they’ll work properly there, either.
Will: most likely, what I’m doing differently is providing fallbacks, as explored in the ALA article. If you don’t have Grid support, you get the old position-based layout here on meyerweb. If you do have Grid support, then you get the enhanced layout. Which, in this case, is minimally enhanced, but I intentionally didn’t try to push it too far.
Jen didn’t write fallbacks on her experimental site, as one might expect, and on the Grid Garden it definitely makes sense that a non-Grid browser would get a “this won’t work without Grid” message.
My feeling on learning and working with Grid now is that it will put you ahead of the curve. It’s very similar to the way I felt people should learn CSS layout even while still understanding how to do table layout. Maybe more so, since it was really hard to enhance a table layout with CSS layout, whereas with Grid it’s pretty easy to do.