An Intro to CSS Grid

I needed a way to build cards on to a page.

Semantic UI’s grid wasn’t working without hardcoding, and I didn’t want to keep cherry-picking from different UI frameworks. While they have their own merits, I realized that Bootstap, Tailwind, Semantic, etc. were just masking my inefficiencies with CSS.

So despite being as busy as ever during Covid(class=’sarcasm’), I decided to further explore vanilla CSS, specifically for Flexbox and Grid.

Below you’ll find a quick intro to CSS Grid, with pictures illustrating how to set up some basic features, control grid column and row sizes, and move items around intentionally.

For more intermediate to advanced Grid application, I’ll include additional resources below so that you can further expand on CSS Grid when you feel ready.

Simple HTML/CSS file set up

Fancy, huh?

Right now all we have a grid-container <div> plus five <div>’s nested beneath in our HTML document. Each <div> is numbered to match the class it belongs to, and that’s it!

A blank white page with numbers.

Just by calling display:grid, we don’t get anything other than standard divs dividing up our page.

So how do we get columns and rows?

In its simplest form, we simply define both grid-template-columns and grid-template-rows.

For these commands, you can use any css-acceptable unit of measurement to define your spaces. I’m going to use fr units first, which are a FRaction of the free space left.

This should give me 3 perfectly even columns.

fr’s can also be known as fo-reals. E.g., “I divided the first row up in to 3 fo-real fo-reals.” — this is not serious.

If we inspect the new grid layout now, we can see that we now have 3 columns, evenly spaced apart, just by defining grid-template-columns.

If I wanted something a bit more custom, I could say I want the left 10% sectioned off for <insert-fancy-feature>, then the remainder divided up evenly as two fractional units.

To make the next part a bit more… colorful (ha….!), I’m going to add a few basic styles to each grid box. A color, a border, and a larger font size, because Grid-Template-Rows allows you to control the height of each row!

Here we have a 100px row for row 1, and a 300px for row 2:

…and the spaces between each box are made with the gap command.

But if you don’t care to gap the entire container evenly, you can use grid-row-gap and grid-column-gap to strategically manipulate the spacing.

Lastly, you can also control the size of these boxes on your site with grid-template-areas.

Right now CSS knows I have three columns set up, so in grid-template-areas, I can tell CSS what I want to be shown across each each column, and I’m gonna tell it that I actually want my header to stretch over all of the top.

Notice that I needed to call grid-area: header in grid-box-1. This is going to give us a new header, and I’ll add in a sidebar, content1, and content2 to the next row.

This will kick my grid-box-5 <div> down to row 3, so I’ll make that my footer.

Voila! An Intro to CSS Grid.

Additional Resources for Continuing Education:

1. CSS Tricks — A Complete Guide to Grid. More advanced features than in this post.

2. CSS Grid Garden — An interactive game to help learn Grid.

3. Building Production-Ready CSS Grids — A longer read with great detail and nuance to build on what you’ve learned here.

3. YouTube — Full of helpful code-alongs and conceptual information about CSS Grid.

YouTube also has a lot of great conceptual videos, like this one detailing differences between Grid and Flexbox.

-