Why CSS Grid will drive the web forward

As of the release of Microsoft Edge 16, the latest versions of all the major browsers now support CSS Grid. Now is definitely the time to learn Grid.

Not only is CSS Grid a great way to save time during development (and give front end developers some new tools to play with), it also allows web designers to think outside the box. Though grid may be made of “boxes” it brings us closer to being able to move away from the box style of web development we’ve been using since the 90s and push the envelope more.

Even if you have to support older browsers it is still possible to use it and add fallback code for older browsers. The Grid by Example site by Rachel Andrews (A CSS Working Group member who worked on the official spec for grid) is a great resource and includes examples of how to support older browsers as well.

Building a simple grid layout with CSS Grid

The markup and styling for a basic three column grid are as follows:

See the Pen CSS Grids - Simple Grid by Kristy Yeaton (@kristyjy) on CodePen.

The grid that is made in this example is only due to the properties used on the .grid class:

display: grid;

This property is to make the element a grid element and its child elements grid children.

grid-template-columns: 1fr 1fr 1fr;

The grid-template-columns property lets you define how many columns your grid should have and how wide they are. With grid you can use a new unit called fr (fractional unit). In this example with three 1fr units we are setting each grid item to take up the same amount of space and have three columns per line. You can also use fr to make each column a different width. For example 1fr 1fr 2fr would make the first two columns the same size and make the third column double the size of the first two columns. You can also use other CSS units for this property and mix them. For example 100px 200px 1fr would have the first column at 100 pixels, the second column at 200px and the third column would take up the remainder of space.

grid-gap: 20px;

Grid gap allows you to set space between each column and row (grid-column-gap and grid-row-gap). It is much easier to use than floats or flexbox because it does not put unwanted padding around the outside of the grid.

Using grid functions to make a responsive grid with ease

When building a responsive grid with flexbox or floats you generally need a lot of breakpoints. Grid doesn’t take away the need for breakpoints completely but, using some more complex grid features, it can greatly reduce the amount needed.

See the Pen CSS Grids - Multi Size Grid Responsive No Breakpoints! by Kristy Yeaton (@kristyjy) on CodePen.

The minmax and the repeat functions are what eliminates the need to write media queries and still be able to change the number of columns depending on screen size.

Repeat

The repeat function takes two arguments; how many times to repeat, and the sizes to be repeated. The above example uses the keyword “auto-fit” which means it should fit as many columns as it can in the row, and if all items are on the first row those items will grow to fit the full browser window width. There is a similar keyword called “auto-fill” that works the same way except it will not increase the size of the columns if they fill the width of the browser window. Try changing the value in the codepen example above to see it in action.

Minmax

We are using the minmax function as the second argument in our repeat function. This allows us to tell the browser the width of the grid item should always be between the sizes of the first and second argument.

The 2-dimensional grid

You may have noticed in the last demo some of the columns were taller than others and even with this change the items on the next line were still able to end up directly under the shorter items. Anyone who has struggled with solving this problem using floats or flexbox knows this is a huge relief. With floats this just isn’t possible without adding JavaScript to do lots of math and reposition everything with absolute positioning. Flexbox can do this if you change the flex direction but it makes the source order move top to bottom instead of left to right and one item cannot span across multiple columns (for example Pinterest).

The reason flexbox doesn’t work the way we want here is because it is considered a one dimensional grid solution. CSS Grid on the other hand is a two dimensional grid and you can have a single item span multiple rows and columns.

See the Pen CSS Grid Masonry by Kristy Yeaton (@kristyjy) on CodePen.

The key rules for this layout are as follows:

grid-auto-flow: dense;

The grid auto flow rule allows us to tell the browser how to automatically align the grid’s children. The dense option will try to fill in any white space it finds by changing the source order. (Try changing the auto flow to row on the example above)

grid-auto-rows: 1fr;

The auto flow rows property allows us to set a default value for row height. This is very important for this kind of layout because not being able to use 1fr to keep them all the same height can cause issues. This grid is simple enough so you shouldn’t see a difference when removing it but with more complex layouts this makes a huge difference.

grid-row-end + grid-column-end

These properties allow us to assign a grid item to multiple rows and/or columns. For example the smallest image in the example above does not have these properties and with default to spanning 1 row and 1 column. The second size spans 1 column but 2 rows so needs the css rule: grid-row-end: 2 span;

Pushing our layouts further

Images can be a bit of a challenge to work with for the style of grid used above. It’s important to make sure each image you plan to use has a somewhat large highest common denominator. In this case I kept it pretty simple and used various combinations of 400px and 800px sized images. You can go much more complex and build something like our team page but know it can be a bit of a challenge to not end up with unwanted white space.

The reason we need to be so specific with our math here is even if our result may not look like a grid we still need to use an underlying grid to lay out everything. This is where the highest common denominator comes in. For example our team page is built on 4 columns but with many small rows inside of each grid item. All of the rows for each item need to be able to be the same size to remain a grid and using the highest common denominator for our image heights allow us to determine how many rows should be inside of each item.

Our team grid with debugging

This screenshot was taken from Firefox using their grid inspector tools. This allows us to see how the underlying grid is laid out and is very helpful for debugging issues with your grid CSS. It also really shows how the grid-auto-rows property is a lifesaver for this kind of grid.

Our team grid broken with debugging

When removing only the grid-auto-rows property this was the result. Notice how each row is a different height so we are unable to reliably predict where each item will start or begin. It also causes the large block of white space under Justyna’s title.

Yes we can

So give CSS Grid a try. I think you’ll find that the days of having to tell a designer “no the web can’t do that” are growing short. I’m definitely looking forward to seeing the innovation modern CSS properties like grid can bring.

Most Read

1 Team health & the retro
2 How to fold QA into every sprint
3 Cooking with the right ingredients - what's your "Definition of Ready"?
4 Android build optimization
5 Why CSS Grid will drive the web forward

Working with startups from concept to launch

We understand that creating a product is a challenging and risky endeavor and believe that having a partner with experience and know-how is a critical first step.

Learn More

The Startup Journey

From idea to launch we guide you through the startup experience

Learn More