As I started to learn about CSS Grid and the new base layout possibilities, I was struck by how much this changes things for design. I don’t think I’m alone in this, either: a search through CodePen reveals plenty of designers and developers thinking about this as well. There are so many new ways to think about how we can design pages and how we can change our layouts based on screen sizes and this short post is just a very shallow dive into the possibilities.
Complex card-type layouts are now possible using simpler CSS. Content can be displayed not just based on source order, but on what makes sense visually. In my first post in this series I showed how CSS Grid allows us to let the content flow, and the browser does the work to get an easy-to-scale tiled grid. For those who remember Masonry layouts, CSS Grid allows us to do that as well, even going so far as specifying exactly which order the content should flow, regardless of the way in which the HTML is written. We get all of this with just CSS, no JavaScript necessary, so there’s less code and easier maintenance.
The biggest difference I see with CSS Grid, however, is that we’re not bound by the columns and rows all being equal. In this CodePen from a collection I love, you can see that there is a much larger content space in the middle of the layout spanning several columns and several rows. CSS Grid makes this easier than techniques we’ve used to achieve this in the past. Instead of putting nested grids inside of the main grid, we can specify the amount of space a single chunk of content takes up. It simplifies the markup and the CSS.
The image above shows that we can think of our grids differently, that we aren’t bound by how we’ve traditionally thought about them. You can absolutely still use traditional grids (see my first post), but the game changer is how much more you can do: you can easily make content flow across columns, take up more than one row, center content in a larger block with chunks of content all around it. It isn’t that we couldn’t do these things with floats, all of these layouts are possible with a lot of extra markup and CSS, but with CSS Grid it’s all so much easier. Floats were always a hack to do layouts, and CSS Grid takes us to a new place, where you are thinking beyond the hack and truly about the grid you can create.
Things get really interesting when we start combining CSS Grid with other techniques to push our layouts even further. Consider the potential of using CSS Grid in concert with tools like transform—to rotate text, layout elements, even the grid itself—or overlapping and layering text in new and interesting ways, using CSS Shapes.
As I spoke with designers I work with at Bocoup, the number one question they asked when I said I was learning CSS Grid was what they could or should do differently in their process. How would they do wireframes differently? How would they think about working in Sketch or Photoshop differently? What, if anything, should they change as they work on layouts in the future?
These aren’t easy questions to answer, to be honest, but Jen Simmons in her talk Modern Layouts: Getting Out of Our Ruts touches on many of these ideas. I’ve been asked by designers who use tools such as Gridulator whether those tools are still relevant, necessary, or worthwhile. If a certain number of columns is still what your layout calls for, yes, those tools could still be helpful, but there are more possibilities for layout than what we’ve done in the past, and if you combine CSS Grid with some of the other new CSS, such as shapes and transforms, you can make some amazing and innovative layouts.
I recommend reading through “Grid layout is a much needed step-change for CSS” to understand some of the possibilities as the author walks you through taking a traditional news design and laying that out using CSS Grid. I agree when he says:
Grid layout is expressive and logical and it solves a number of fundamental gripes. When combined with flexbox we have a set of layout systems for the browser that are approachable, powerful and so much less irritating!
Maybe the best way to start is to forget about the computer, sketch out designs with pen and paper and push yourself to think outside of the constraints you’ve grown accustomed to. What would you do with the content and vision you’ve gained through your research phases of design if you could do anything? Take a look at old print magazines for inspiration—it may spark ideas that can be achieved now that we have new ways of laying out our pages.
