A Painless Overview to CSS Grid

To be honest, it took me a while to open up to messing around with CSS. I initially thought it was dumb and annoying and that it was stupid… But it was even more frustrating not being able to get my HTML to stay where I wanted it to be. So I learned CSS Grid and soon realized that the more I knew how to use CSS the easier (and more pleasant) web development became.

So for all my peers who feel like this when it comes to CSS.

Here's a painless overview of what CSS Grid can do for you.

The Simple Grid

CSS Grid is one of two major layout systems used within web development (the other being Flexbox), which can largely impact your website's design and thus user experience. It gives you the power to create… well… a Grid.

But this grid can be specified to your needs depending on how you write out the CSS. Unlike flexbox, which is largely a 1-dimensional system, CSS Grid is 2-dimensional, which allows it to create and handle both columns and rows. This allows you to write rules for both the parent element (grid-container or grid-wrapper) and the parent element’s children (grid-items).

The parent div has a class of ‘wrapper’ while the children or grid-items have a class ‘box #’

We create a grid container by declaring the parent elements display to ‘grid’:

You can also declare it as ‘inline-grid’

Once this has been set, all the child elements will become grid-items.

Currently, the grid is in its simplest form, a single column containing the five children. So you might not see much of a difference now, but let's add some columns and rows.

Adding Rows & Columns: Grid Tracks

We define rows and columns on our grid with the grid-template-columns and grid-template-rows properties within the .wrapper/.container’s css. This will define the grid tracks: the space between any two lines on the grid.

Notice that a grid track can either be vertical (column track) or horizontal (row track). Each track is composed of cells, and multiple cells can create an ‘area’.

So back to creating rows and columns.

We can use grid-template-columns to define both the number of columns within the grid, as well as a fixed or dynamic value for the width of the columns, either individually or as a whole. Similarly, grid-template-rows will do the same for the number of rows and height of each row within your grid.

Below we see that within the grid-container, we are defining a grid with 5 columns and 3 rows, each with individually set values for width and height respectively.

Notice that the values can be fixed with a px value, or be dynamic with a % value or ‘auto’ value. There is also an ‘fr’ value we’ll see soon. And also notice that you can use each value type all within the same property!

The above CSS will create a grid with these dimensions.

Notice, that as you define the number of columns and rows, you also define the number of grid lines within the grid. These lines are important for defining how many cells a grid-item will take up within the grid, which will create a grid-area. As you define grid areas, it can be helpful to name these lines so you know exactly where you are placing your grid-items.

Naming Grid-Lines:

These are the same property values that we have above, however notice the bracket notation. This is how we can set the names for each of our grid-lines, whether column or row.

This will now render the same grid, but with different line names:

Once the grid lines have been delineated within the grid-container, you can set the values for grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties within the grid-items’ CSS to designate how many cells that element will take up from the grid.

Note: if no grid-column-end/grid-row-end is declared, the item will span 1 track by default. Note 2: you can also overlap items sharing the same cells with the z-index, controlling the stacking order.

Sidebar: repeat() & fr

If your grid-template-columns definition contains repeating parts, you can use the repeat() function.

This will create 3 columns with a width of 20px, each with the name ‘col-start’

Which is the same as this:

If multiple lines share the same name, they can be referenced by their line name and count like so:

This property is set on the child element or grid-item’s css. It will start on the 2nd line named ‘col-start’.

Now lets say you’d rather not have fixed dimensions, so your grid can expand to the available space available. You can use the handy ‘fr’ unit. The ‘fr’ unit allows you to set the size of the track as a fraction of the available space of the grid container.

This will create 3 equally sized columns that will size according to the available space within the grid-container. The free space is calculated after any non-flexible items.

Back to grid-areas: grid-template-areas & grid-area

Another way to define grid areas is to use the grid-template-areas property and the grid-area property.

The grid-template-areas property is written within the grid-container’s CSS, and works hand in hand with the grid-area property found within the grid-item’s CSS.

The grid-template-areas “defines a grid template by referencing the names of the grid areas which are specified with the grid-area property” on the grid-item’s CSS. Essentially, you’re providing each cell a name, and the grid-item with the corresponding name will fill up the cells associated with it.

The values for grid-template-areas include: <grid-area-name> — the name of a grid area specified with grid-area || a period (.) — signifying an emply cell || ‘none’ — no grid areas are defined

The above CSS will create a grid design like so:

Notice that with grid-template-area, you’re not naming lines with this syntax, just the areas (grid-cells), instead, the lines on either end of the areas are actually getting named automatically. So in the above example. The ‘header’ area, starts at col-1 / row-1, and ends at col-5 / row-2; within this context, they would be names ‘header-start’ and ‘header-end’ for both col and row lines.

Grid-Gaps

Sometimes you want some space between your columns and rows. When that's the case you can use the column-gap and row-gap properties to create space or ‘gutters’ between the grid-cells (not on the outer edges though):

Line Size is a length of value like pixels

Another Example:

There's plenty more to learn…

As with most things within web development and computer science, there’s always more to learn about any given topic, so I’ll leave some aspects of CSS Grid for you to discover on your own (like shorthand notations, justifying/aligning content, minmax, auto-fit, etc.). But here are some of the main principles and properties that I’ve found to be critical in my understanding of CSS Grid and essential to my own sites that I develop. And if you’re like I used to be, completely against CSS, then I sincerely hope this helps alleviate the frustration and makes your relationship with it a little better.

Thanks for reading and here are some super informative sites for learning more!

link 1, link 2, link 3, link 4

Just another one of those dreamers with a sparkle in his eyes.