» All Posts «

Joy of Coding: CSS Grid

Kevin Croake September 18, 2017 Web Design & Development 2 Comments

Share Comment 2

Earlier this year, all modern browsers–Chrome, Edge, Firefox, Safari–added support for CSS Grid. Which gives us front-end developers a new toy to play with. Keep reading to discover a few examples of how to use these and why they are so sweet.

What is CSS Grid?

Grid is a 2-dimensional layout system, which basically means it supports columns and rows. To get started, set the parent element to be display: grid. Afterwards, every item within that element is considered a grid-item now. Pretty easy right? This is new to CSS, as before we would hack floats or use display: inline-block; to create grid systems. This new method allows us to create simple grid systems with less work.

Basic Grid Examples

What can we build with it, you ask? A layout web designers use a lot is a 3 column grid for blog posts. You have probably seen this over a million times already, but here is a basic non grid example.

See the Pen 3 Column Grid – Inline-block by Jackrabbit Design (@jackrabbitdesign) on CodePen.

Here, I’m using display: inline-block on the article elements and font-size: 0; on the main element to remove the extra space. I use something like this a lot (minus the use of calc; which is being used for convenience) and don’t care for it. Using font-size: 0; to remove the extra space with display: inline-block is such a hack, requiring you to adjust the font-size on child elements again. You can also use negative margins here to fix the spacing issue but that is also rather hack-y.

So lets see how we can use this with grid.

See the Pen CSS Grid – Three Column by Jackrabbit Design (@jackrabbitdesign) on CodePen.

Wow, that was easy. Now you may have noticed I’m not using a pixel or percentage width for the the boxes, instead opting for fr. fr means fraction unit and the way it works it takes up any available space. In this example below, view a 5 column grid using only fr units.

See the Pen fr – example by Jackrabbit Design (@jackrabbitdesign) on CodePen.

You can also mix units when using Grid. If you want to have your first column be a fixed fixed pixel size you can.

See the Pen Mixed Example by Jackrabbit Design (@jackrabbitdesign) on CodePen.

In this example, I want a fixed 400-pixel column, 1 fraction unit, and then a flexible 20% of the page. For a small amount of code we are seeing some pretty cool layouts already. Lets go back to our first example.

If you wanted to make this grid responsive you might think we’d need to use media queries and change the grid columns, right? Seems like a reasonable approach. Nope, don’t need too, we can actually do this using auto-fill and minmax. Both auto-fill and minmax are new properties within CSS Grid.

See the Pen CSS Grid – Three Column Responsive by Jackrabbit Design (@jackrabbitdesign) on CodePen.

Scale the window back and watch it collapse down to 2 columns then 1 column. Pretty sweet right? Our responsive grid is pretty much done and we can build on to other parts.

You can also set grid-items to span across multiple rows and columns.

See the Pen CSS Grid – Spans example by Jackrabbit Design (@jackrabbitdesign) on CodePen.

This is relatively new to web design. We likely could have recreated it using position absolute and tedious positioning or using a javscript plugin. But grid gives us the ability to be precise with our position, using the span and the grid-row and column attributes.

Browser support.

If we take a look at canisue.com, we have support for for almost all modern browser. IE 10, 11, and Edge currently need a -ms- vendor prefix, which if you are using a tool like autoprefixer should be rather easy to accomplish.

Final Thoughts on Grid

It is awesome. Using Grid, I can see myself making simple grids as well as new creative page layouts similar to print design. It’s also really easy to create modernist artwork like this Mondrian.

See the Pen Piet Mondrian by Jackrabbit Design (@jackrabbitdesign) on CodePen.


Resources

Want to learn more about Grid? There are a ton of websites dedicated to teaching you CSS Grid. Here’s some good ones.

Frameworks

I haven’t looked for any yet but I would advise you to try writing a grid yourself before reaching for a framework.

2 Comments

  • Hal November 14, 2017

    What’s your take on this for Internet Explorer and Edge?
    I’m trying to find a syntax that will result in multiple columns collapsing to a single column, but this just shows as one-column layouts at any window width.

    • kcroake November 22, 2017

      Hola, Edge should work just fine as long as you have the -ms- prefix. IE on the other hand is a bit tricky but nothing out of the ordinary. I would use probably use modernizer to check if grid is supported and you can write some css if grid isn’t supported. If you don’t want to use javascript you could use @supports.

      Example of @supports here https://codepen.io/jackrabbitdesign/pen/YELXOQ. Its kinda cool and requires no javascript but you need to reset your previous styles which is kinda a pain.

Leave a Comment