Skip to main
CSS Grid example layout

Will CSS Grid Layout Enable Creative Design?

CSS Grid Layout is shaping up to be the layout tool we’ve always wanted on the web. How can we use it to start creating interesting layouts?

I couldn’t be more excited about CSS grid layout. For far too many years we’ve been dealing with CSS solutions that were never made for the layouts we have been creating. Working with tables then floats and positioning have conditioned us to avoid anything outside of these standard patterns we’ve come to settle upon. But designers and CSS developers can soon rejoice when the CSS Grid Layout Module hits browsers.

In the meantime, Flexbox has been a great addition to our CSS Toolbox, giving us a way to lay content out easier than before. Remember when vertical centering used to be a huge ordeal? There are a number of issues that are “Solved by Flexbox,” but it is still not a complete grid solution.

If you haven’t used Flexbox yet, I highly suggest studying this CodePen demo:

See the Pen Flexbox playground by @enxaneta on CodePen.

Flexbox is great for single direction elements but lacks the ability to create structure on both x and y axis’. A container with display: flex; can either go horizontally or vertically as selected by the flex-direction property.

Well, CSS Grid Layout is in the far distant future. It doesn’t have much browser support at the moment so if you want to use it on a production site you may want to use Feature Queries. By wrapping your code in an @supports conditional, it will check to see if the browser has support for the property/value pair in the parentheses, and if so, will use what is inside the @supports brackets. If the browser doesn’t have support for display: grid or if the browser doesn’t even know what Feature Queries are, then it ignores the block of code.

.container {
  display: flex;

  @supports ( display: grid ) {
     display: grid;

Currently, Feature Queries are supported in most browsers except Internet Explorer and Opera Mini:

Feature Queries support in browsers looks good

Grid Introduces New Vocabulary

Grid line The lines that create the grid, separating the grid cells.

Grid line Grid line

Grid track The horizontal or vertical space between two grid lines, often spanning multiple grid cells.

Grid track Grid track

Grid cell A single unit of the grid made from the space between four grid lines.

Grid cell

Grid area A group of space between four grid lines, often containing a group of grid cells. Grid areas can be named in CSS.

Grid area

Grid-specific CSS Properties

Over the next few months we will be writing more about CSS Grid Layout. In the meantime, CSS-Tricks posted a guide from Chris House that explains each of the below properties in great detail.

CSS Grid Layout Properties to use on a Grid Container:

CSS Grid Layout Properties to use on a Grid Item:

I’ve been creating a few demos in CodePen using Grid and it has been exciting to see the flexibility we will have once this rolls out. I encourage you to start experimenting on your own as well.

See the Pen CSS Grid Layout Demo by @stacy on CodePen.

In the CodePen demo below, you’ll see we start with floats then wrap everything else in @supports ( display: flex ) {} or @supports ( display: grid ) {}. Within the first Flexbox conditional, we over-write the float, max-width, and clearing properties we defined for the older browsers.

See the Pen CSS Grid Layout with float and flexbox fallbacks by @stacy on CodePen.

What types of layouts can we create with this more flexible system? I would love for some very experimental design to start taking place. I can hear the sighs from usability experts everywhere so let me be clear, I am not saying that we need to create crazy, chaotic designs with unpredictable navigation patterns. I am only asking how we can explore and create new ways to layout out content that are still intuitive but perhaps different from what we’ve always done in the past.


CSS Grid Layout

Related Conference Talks

There have been a number of wonderful conference talks from CSS Grid advocates including Rachel Andrew, Christopher Wright and Jen Simmons demonstrating the how, why and what is possible when it comes to CSS Grid Layout. If you have any resources to share with us, we’d love to hear from you, too!

Taking Layout to the Next Level, by Chrisopher Wright

Recent Articles

  1. A stand of smartphones
    Article post type

    When to Choose a Native Mobile App

    Part 2 – Responsive Web App vs Native Mobile App vs Progressive Web App

    If you have an idea for a digital product, you may be wondering if you should build a responsive web app, a native mobile app, or a progressive web app. Is one option inherently better? What are the pros and cons? This is part 2 of a three-part series unpacking…

    see all Article posts
  2. spider web with dew drops
    Article post type

    When to Choose a Responsive Web App

    Part 1 – Responsive Web App vs Native Mobile App vs Progressive Web App

    The decision of what platform to use to build your app is quite important – affecting project scope, timeline, and budget. But understanding the differences between a responsive web app, a native mobile app, and a progressive web app – and deciding which one is right for your project …

    see all Article posts
  3. The top front of a bright yellow shipping container with the door open and a blue sky behind it
    Article post type

    Can We Query the Root Container?

    The complexities of containment, overflow, and ‘propagation’

    I spoke about Container Queries at both Smashing Conference (San Francisco) and CSS Day (Amsterdam) – where I recommended setting up a root container to replace most media queries. Since then, Temani Afif pointed out a few issues with that approach, and sent me down a rabbit hole of overlapping…

    see all Article posts