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.
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.
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.
You can also mix units when using Grid. If you want to have your first column be a fixed fixed pixel size you can.
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.
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.
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.
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.
Want to learn more about Grid? There are a ton of websites dedicated to teaching you CSS Grid. Here’s some good ones.
I haven’t looked for any yet but I would advise you to try writing a grid yourself before reaching for a framework.