Learn CSS Grid with Pinegrow

Lines define the grid

CSS Grid lets us position HTML elements into a 2-dimensional layout. We’ll create a simple grid and explore lines that define the grid, as well as play with distances between the lines.

 

CSS Grid lets us position HTML elements into a 2-dimensional grid.

Let’s create a simple grid.

First we create a new blank HTML page. We could use Bootstrap or other frameworks here as well. But here we’ll just use plain HTML so that we can focus on the grid.

Let’s save the page first.

We can skip this.

CSS Grid is defined on the container element. That is the element that contains the elements that are positioned with the grid.

So let’s add CSS Grid to the Body element.

This will be our Grid element.

The BODY is selected.

To create the grid we click on the Edit grid icon in the element menu. We can also choose Edit Grid from the dropdown menu.

This will open the CSS Grid editor.

And here we create the grid.

We got a Grid with 3 columns and 1 row.

Again we can use the Style Panel to inspect the CSS code.

Here we see that the Grid layout is activated by setting the display property to grid.

Grid-template-columns and grid-template-rows properties define the layout of the grid.

Let’s add another Row to the Grid, so that we have a nice 3 by 2 layout.

In many ways CSS Grid is similar to HTML tables. We have columns and rows in both.

But, there is one important difference – the CSS Grid is not defined by columns and rows.

It is defined by lines.

We have vertical lines… and we have horizontal lines.

The lines are numbered from 1 up.

One, Two, Three, Four.

One, Two, Three.

These lines create a grid.

The column and row values specify the distance between the two lines.

Looking at rows, he have 100px between the first and the second line, and then another 100px between the second and the third line.

For columns, we’re using a special Grid unit called Fraction that divides all available space. We’ll take a detailed look at the Fraction unit later. For now, we are just looking at how these sizes define the distances between the lines.

Changing these values changes the grid layout.

We can also specify the gap between columns and rows.

Note that what we’re seeing on the page is just the Grid outline, displayed by Pinegrow to help us visualize the grid layout.

We haven’t yet placed any elements into the grid.

In the next part we’ll build a simple page layout. Let’s first delete the Grid from the body element, so that we start with a fresh page.

So, to repeat:

Grid is turned on by display:grid declaration on the container element.

The layout of the grid is defined by vertical… and horizontal lines.