A ten-part tutorial on CSS Grid from Mozilla.
Tuesday, October 3rd, 2017
Monday, October 2nd, 2017
The BBC has been experimenting with some alternative layouts for some articles on mobile devices. Read on for the details, but especially for the philosophical musings towards the end—this is gold dust:
Even the subtext of Google’s marketing push around Progressive Web Apps is that mobile websites must aspire to be more like native apps. While I’m as excited about getting access to previously native-only features such as offline support and push notifications as the next web dev, I’m not sure that the mobile web should only try to imitate the kind of user interfaces that we see on native.
Do mobile websites really dream of being native apps, any more than they dreamt of being magazines?
Saturday, September 30th, 2017
A great practical article from Rachel answering some frequently asked questions about—what else?—CSS Grid.
Thursday, September 14th, 2017
A really nice example of progressive enhancement: creating a layout with
inline-block, then flexbox, then Grid.
Friday, September 8th, 2017
A deep dive into the CSS declaration that Jen told me she wants on a T-shirt.
Tuesday, August 22nd, 2017
Lin gives a deep dive into Firefox’s new CSS engine specifically, but this is also an excellent primer on how browsers handle CSS in general: parsing, styling, layout, painting, compositing, and rendering.
Friday, August 4th, 2017
Oh, how I wish I could’ve been at Web Directions Code in Melbourne to see this amazing presentation by Charlotte. I can’t quite get over how many amazing knowledge bombs she managed to drop in just 20 minutes!
Monday, July 31st, 2017
Rachel is maintaining this (short) list of browser bugs with CSS Grid, inspired by the excellent Flexbugs.
Grid shipped into browsers](https://gridbyexample.com/browsers) in a highly interoperable state, however there are a few issues - let’s document any we find here.
Tuesday, July 25th, 2017
A great example of progressive enhancement in action.
You can perfectly use CSS grid layout today if you don’t expect exactly the same appearance in every single browser, which isn’t possible to achieve nowadays anyway. I’m well aware that this decision isn’t always up to us developers, but I believe that our clients are willing to accept those differences if they understand the benefits (future-proof design, better accessibility and better performance). On top of that, I believe that our clients and users have — thanks to responsive design — already learned that websites don’t look the same in every device and browser.
Wednesday, July 5th, 2017
Rachel uncovers a great phrase for dealing with older browsers:
It isn’t your fault, but it is your problem.
She points to multiple ways of using CSS Grid today while still providing a decent experience for older browsers.
Crucially, there’s one message that hasn’t changed in fifteen years:
Websites do not need to look the same in every browser.
It’s crazy that there are still designers and developers who haven’t internalised this. And before anyone starts claiming that the problem is with the clients and the bosses, Rachel has plenty of advice for talking with them too.
Your job is to learn about new things, and advise your client or your boss in the best way to achieve their business goals through your use of the available technology. You can only do that if you have learned about the new things. You can then advise them which compromises are worth making.
Sunday, June 25th, 2017
Bram hopes for a way to define aspect ratios natively in CSS. We can sort of manage it now, but all the solutions are pretty hacky.
Tuesday, June 6th, 2017
A great description of one of the most powerful features in CSS Grid.
This function opens the door to us being able to write much more powerful and succinct CSS by allowing us to set, as a value for a grid track, a function including both a minimum and maximum value.
Tuesday, May 30th, 2017
Charlotte has caught the CSS Grid bug. I absolutely love her step-by-step explanation—it’s really clear, and manages to be brief but thorough at the same time.
It’s time to be more experimental and push the boundaries with layouts.
Tuesday, May 23rd, 2017
A quick visual guide to CSS Grid properties and values.
Tuesday, May 2nd, 2017
Styling the Patterns Day site
Once I had a design direction for the Patterns Day site, I started combining my marked-up content with some CSS. Ironically for an event that’s all about maintainability and reusability, I wrote the styles for this one-page site with no mind for future use. I treated the page as a one-shot document. I even used ID selectors—gasp! (the IDs were in the HTML anyway as fragment identifiers).
The truth is I didn’t have much of a plan. I just started hacking away in a
style element in the
head of the document, playing around with colour, typography, and layout.
I started with the small-screen styles. That wasn’t a conscious decision so much as just the way I do things automatically now. When it came time to add some layout for wider viewports, I used a sprinkling of old-fashioned
display: inline-block so that things looked so-so. I knew I wanted to play around with Grid layout so the
inline-block styles were there as fallback for non-supporting browsers. Once things looked good enough, the fun really started.
I was building the site while I was in Seattle for An Event Apart. CSS Grid layout was definitely a hot topic there. Best of all, I was surrounded by experts: Jen, Rachel, and Eric. It was the perfect environment for me to dip my toes into the waters of grid.
Jen was very patient in talking me through the concepts, syntax, and tools for using CSS grids. Top tip: open Firefox’s inspector, select the element with the
display:grid declaration, and click the “waffle” icon—instant grid overlay!
For the header of the Patterns Day site, I started by using named areas. That’s the ASCII-art approach. I got my head around it and it worked okay, but it didn’t give me quite the precision I wanted. I switched over to using explicit
It’s definitely a new way of thinking about layout: first you define the grid, then you place the items on it (rather than previous CSS layout systems where each element interacted with the elements before and after). It was fun to move things around and not have to worry about the source order of the elements …as long as they were direct children of the element with
Without any support for sub-grids, I ended up having to nest two separate grids within one another. The logo is a grid parent, which is inside the header, also a grid parent. I managed to get things to line up okay, but I think this might be a good use case for sub-grids.
The logo grid threw up some interesting challenges. I wanted each letter of the words “Patterns Day” to be styleable, but CSS doesn’t give us any way to target individual letters other than
:first-letter. I wrapped each letter in a
b element, made sure that they were all wrapped in an element with an
aria-hidden attribute (so that the letters wouldn’t be spelled out), and then wrapped that in an element with an
aria-label of “Patterns Day.” Now I could target those
For a while, I also had a
br element (between “Patterns” and “Day”). That created some interesting side effects. If a
br element becomes a grid item, it starts to behave very oddly: you can apply certain styles but not others. Jen and Eric then started to test other interesting elements, like
hr. There was much funkiness and gnashing of specs.
It was a total nerdfest, and I loved every minute of it. This is definitely the most excitement I’ve felt around CSS for a while. It feels like a renaissance of zen gardens and layout reservoirs (kids, ask your parents).
After a couple of days playing around with grid, I had the Patterns Day site looking decent enough to launch. I dabbled with some other fun CSS stuff in there too, like gratuitous clip paths and filters when hovering over the speaker images, and applying
shape-outside with an image mask.
Go ahead and view source on the Patterns Day page if you want—I ended up keeping all the CSS in the
head of the document. That turned out to be pretty good for performance …for first-time visits anyway. But after launching the site, I couldn’t resist applying some more performance tweaks.
Saturday, April 15th, 2017
This is a really clear explanation of how CSS works.
Tuesday, April 11th, 2017
A handy GUI for experimenting with CSS Grid Layout without having to recall the syntax.
Monday, April 10th, 2017
Getting griddy with it
I had the great pleasure of attending An Event Apart Seattle last week. It was, as always, excellent.
It’s always interesting to see themes emerge during an event, especially when those thematic overlaps haven’t been planned in advance. Jen noticed this one:
The theme of this year’s AEA (ideas emerging across talks) — do not just do a thing on your project because others do on theirs. #aeasea— Jen Simmons (@jensimmons) April 3, 2017
I remember that being a theme at An Event Apart San Francisco too, when it seemed like every speaker had words to say about ill-judged use of Bootstrap. That theme was certainly in my presentation when I talked about “the fallacy of assumed competency”:
- large company X uses technology Y,
- company X must know what they are doing because they are large,
- therefore technology Y must be good.
Perhaps “the fallacy of assumed suitability” would be a better term. Heydon calls it “the ‘made at Facebook’ fallacy.” But I also made sure to contrast it with the opposite extreme: “Not Invented Here syndrome”.
As well as over-arching themes, it was also interesting to see which technologies were hot topics at An Event Apart. There was one clear winner here—CSS Grid Layout.
Microsoft—a sponsor of the event—used An Event Apart as the place to announce that Grid is officially moving into development for Edge. Jen talked about Grid (of course). Rachel talked about Grid (of course). And while Eric and Una didn’t talk about it on stage, they’ve both been writing about the fun they’ve been having having with Grid. Una wrote about 3 CSS Grid Features That Make My Heart Flutter. Eric is documenting the overall of his site with Grid. So when we were all gathered together, that’s what we were nerding out about.
There are some great resources out there for levelling up in Grid-fu:
- Jen’s experimental layout lab shows what’s possible.
- Her exercises in Codepen are a great way to test your knowledge of Grid.
- So is CSS Grid Garden.
- Rachel’s extensive Grid by Example is the perfect way to find the Grid solution to your layout scenario.
With Jen’s help, I’ve been playing with CSS Grid on a little site that I’m planning to launch tomorrow (he said, foreshadowingly). I took me a while to get my head around it, but once it clicked I started to have a lot of fun. “Fun” seems to be the overall feeling around this technology. There’s something infectious about the excitement and enthusiasm that’s returning to the world of layout on the web. And now that the browser support is great pretty much across the board, we can start putting that fun into production.
Sunday, April 9th, 2017
Here’s a handy interface if you want to get your head around named areas in CSS Grid, also known as doing layout with ASCII art.
I’ve been digging into CSS Grid a lot during the past week, so this post from Eric is very timely. On the surface it looks like a fairly simple use case but as you read through the explanation, it starts to become clear that the underlying thinking could be used in a lot of situations.
And, yes, like Eric, I too have been bitten by the Grid bug:
I’m working on my first redesign in a dozen years. If that doesn’t give you some sense of the power of Grid, well, I just don’t know what will.