Despite many clever hacks and creative workarounds, there hasn’t been a simple answer for creating layout on the web. From misusing tables, to over-engineering simple floats that push around content, developers have consistently struggled to translate designs to code. Developers have been saying for years that there has to be a better way to create responsive websites, and finally, there is: CSS Grid, a proper layout tool for the web baked right into CSS itself, is here. It’s fantastic! It’s exactly what we’ve been waiting for! And yet, it seems to me that developers are hesitating. What’s the hold up?
“There’s no way I can start using CSS Grid yet”
You’re absolutely ready to declare display: grid if you’re the only person contributing code. However, if you’re working with a bigger team, on an older project or are faced with some real-world constraints, there may be some challenges ahead of you:
- Your designers have heard, “No, you can’t do that, that’s not how layout on the web works,” too many times, so they’re not designing anything that calls for you to learn CSS Grid.
- Your developers have heard, “You can’t use that yet, we still have to support x browser,” too many times. They don’t dare dream that all of the excitement about CSS Grid can apply to them quite yet — adding CSS Grid is out of scope.
- You’re on a tight deadline and you’re still not over how long it took you to really wrap your head around Flexbox. You promise yourself that you’ll take the time learn CSS Grid next time… for the next project… someday.
If any of the scenarios above sound familiar, then start small with Progressive Enhancement. Use feature queries to enhance your components with CSS Grid, and worry about deleting old code later. Use the time to show the potential of CSS Grid to your designers. Learn without worrying. You might have to override some styles, but the gains will outweigh the temporary extra code.
Gridlock
“That sounds nice, but I can’t use CSS Grid, we’re still on Bootstrap!”
Don’t let that stop you from progressively enhancing your app with the new and exciting features of CSS!
CSS is a powerful tool and remarkably flexible. I made an example on Codepen that embraces CSS Grid without removing the Bootstrap code or functionality for old browsers. Try it out, resize your browser, and then toggle off the CSS Grid enhancement. I tried to make just about every breakpoint a little different to show the creativity and flexibility made possible with CSS Grid. Fork it, play around and make something new. It’s just an example, and I hope you have fun with it.
“Why didn’t you just use Bootstrap? There’s hardly any difference!”
Yeah, yeah. Listen, I get that I could have just used Bootstrap and called it a day; it works just fine, and it’s incredibly fast to throw together once it’s already on a project. That’s why it’s still the fallback.
But once you get a glimpse of the future, it’s hard to stay in the past. I have seen the power and potential of CSS Grid and I wanted to start using it. Or, more specifically:
- I didn’t want to declare a height to accommodate the maximum content. I would much rather have the rows know how tall each item should be.
- I wanted the option of having variable widths for each item, and I didn’t want to have them be split evenly or predictably all of the time.
- I was bored by having to always think in terms of 12 columns. Lots of websites use 12 columns and they all look the same.
- I felt trapped by fixed breakpoints for columns, and I wanted to set my own breakpoints to best serve my content.
- I didn’t want to keep making the choice between affecting global layout rules and writing hacky overrides.
- I wanted to easily change the gap between my columns. Sometimes a 3px column gap is all you need.
- I wanted to be able to set a min and max for each item and let the browser figure out how many items fit in each row. I am a huge fan of letting the browser do the math.
- It took about three lines of CSS to write the grid layout I wanted, and I wanted to live in the bright and beautiful future where layout is always that simple.
Most importantly, I wanted to be excited about layout on the web again, and I wanted the designers I work with to feel the same.
“Won’t I just be writing throwaway code?”
CSS Grid isn’t a hack, it’s a proper layout tool for the web. You don’t need to install anything, you don’t need a preprocessor, and you don’t need to twist your brain into knots just to understand how it works.
Using CSS Grid doesn’t mean writing throwaway code — the throwaway code will be the old code you’ll want to delete when the timing is right, and that will be much sooner than you think: Chrome, Firefox and Safari all support CSS Grid, and soon Edge 16 will support CSS Grid, too.
“That’s nice in theory, but what about in practice?”
Turns out, it’s pretty great in practice, too. I implemented this CSS Grid progressive enhancement on The New York Times Watching media card component. Users on old browsers see Bootstrap, but users on browsers that support the display: grid property get the CSS Grid enhanced styles including the thin column gutters that our designers envisioned. Plus, next time there’s a redesign, our designers know they aren’t beholden to the old way of doing layout on the web. It may not look like it right now, but it’s actually a major step forward.
“Ok, I’m convinced! Where do I go next?”
There are so many great resources out there! Personally, I recommend checking out the following:
Online Resources: Amazing work done by Jen Simmons (labs.jensimmons.com) and Rachel Andrew (rachelandrew.co.uk). Both are experts on CSS Grid and I am grateful for their hard work in pushing the web forward.
In Person: If you’re like me and are a fan of conferences, how about going to CSS Dev Conf ? It’s awesome (I’ve been 3 times now), and as a bonus, it’s in New Orleans this year. If you go, make sure you attend Brenda Storer’s talk on CSS Grid or Miriam Suzanne’s talk on CSS grid systems.
Codepen: Check out this CSS Grid Codepen collection by Stacy Kvernmo.
DIY: Download Firefox and start using their handy grid inspection tool — it looks like a little waffle icon right next to display: grid in the inspector. Trust me, being able to visualize the changes you’re making is key. Visit some websites that are already using CSS Grid in production, inspect, and play around in the browser dev tools. A great place to start is the very instructional labs.jensimmons.com.
“Great! I’ve got my resources, I’ve downloaded Firefox, and I’m ready to display: grid… but there is no place in my company’s project where I can try this out for real.”
There are a couple of good places to start. Do you have anything that’s only used internally? For example, I think one of the best places to start is with your style guide. (If you don’t have a style guide, get one and start documenting your design patterns!) To start, you can lay out your blocks of brand colors with CSS Grid.
Alternatively, you can take a progressive enhancement approach on just one component at a time. Use feature queries to wrap your grid declarations and you’ll be able to start using CSS Grid without having to make sweeping changes to your whole site all at once.
Start small, start simple, and build it up slowly! I promise it’s worth it.
I hope you’ll share your work! It’s an exciting time for layout on the web. Get creative and make something new.
