CSS Grid Basics

Along with flexbox, grid is one of the most useful tools for structuring the way your webpage displays. Grid is actually the first CSS module created to address the problem of webpage layouts. A grid consists of a container and items. The container is the direct parent of all grid items and the items are direct descendants to the grid parent. Another important aspect of grids to understand is the grid line and the grid cell. If you imagine a 3 by 3 grid, essentially a tic-tac-toe board, there are 9 grid cells and 4 grid lines; 2 horizontal and 2 vertical.

A grid line is a separator between grid cells inside the grid container

.container {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}

Grid Template

The first thing needed to create a grid is to declare it in CSS. It’s as simple as setting the display to grid (display: grid;). The next step is to decide how many rows and columns you want in your grid. This is declared within the container using either grid-template-rows or grid-template-columns followed by the values used to determine the row’s or column’s height or width. You can use pixels, ems, percentages, and even fractions to determine the size of your rows and columns. In the example above, the tic-tac-toe, the rows and columns are 1 fraction each. This tells CSS to make the the grid 3 cells wide, because there are 3 fractions total in grid-template-columns, and 3 cells tall, because there are 3 fractions total in grid-template-rows. It also results in all of the rows and columns being the same size, because they are 1 fraction each CSS automatically fills the space so that they’re even, saving you some math.

Grid Row / Column Start and End

Now that you have your grid setup using the template you’ll want to use it to place items within the grid you’ve created. The way you do that is by adding grid-row-start and/or grid-column-start to the items you’re trying to style followed by an integer (example below). The integer represents the grid line the item starts from. The same philosophy applies to both grid-row-end and grid-column-end,the number represents the line, not the cell. Just like and array, you can use negative integers to start from the end to the grid, -1 being the very end. Instead of writing out the start and end for both the column and row each time you can use a “/” for shorthand. The .red item in the example below could be rewritten as grid-row: 2/3; grid-column: 1/4;.

This should help visualize some the code below

.container {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
width: 100vw;
height: 100vw;
}
.red {
background-color: rgba(255, 0, 0, .6);
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 4;
}
.blue {
background-color: rgba(0,0,255, .6);
grid-row-start: 1;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 3;
}

Grid Area

Grid area is an even better shorthand than using the single backslash (/) with grid-row or grid-column. Not only can the example above be rewritten as grid-row: 2/3; grid-column: 1/4;. It can also be rewritten using grid-area as grid-area: 2 / 1 / 3 / 4;. This shorthand replaces 4 lines of code with one. It starts with the two starting values, first for the row, then for the column. Followed by the ending point for the row then column.

grid-area: (row-start) / (column-start) / (row-end) / (column-end)

Grid Template — Shorthand

Just like grid-area for the items within the grid, there’s a shorthand for creating the template of your grid. It follows a similar syntax, using a backslash (/) to separate rows and columns.

grid-template:
    (row spacing(px, ems, fr, %)) / (column spacing(px, ems, fr, %))

I hope this gets you more comfortable with grid and helps you visualize it in your mind. Copy the example I provided above and play around with it, experimentation is essential for learning. Don’t be afraid of using grid, you’re not going to get comfortable unless you give it a try. A lot of the time the discomfort is part of the learning process. As always if you have any questions or just want to link up, feel free to connect with me on LinkedIn.