How to Learn CSS Grid with Pinegrow

Matjaž Trontelj
Dec 14, 2017 · 4 min read

There are many useful CSS Grid tutorials out there. So instead of explaining the CSS Grid itself, I’ll show you how to use Pinegrow Web Editor to interactively explore and learn about the Grid.

In case you’re not familiar with Pinegrow, it’s a desktop app that aims to speed up working with HTML and CSS. I launched it in 2014 and we had an exciting journey since then.

First, you’ll need to install Pinegrow 4.1 or newer version. A free trial is included so that you can do everything described here without having to purchase a license.

When it comes to CSS Grid tutorials and examples, Grid by Example is a good place to start. We’ll use it here.

Let’s open the fifth example from Grid by Example, the one named “Line-based placement spanning tracks”.

Examples from Grid by Example

On the example page click on “View example as full page” to get the URL of the standalone example page:

In Pinegrow, choose Open URL and copy paste the URL of the full page example:

Open URL in Pinegrow

Once the page is loaded, switch to the Style panel. The Style panel lets us explore and edit CSS rules that affect the selected element, as well as edit CSS, SASS and LESS stylesheets.

Select the Wrapper element on the page. The Style panel will show the .wrapper class rule. Click on the .wrapper rule to select it and show it in the Visual editor below.

Select the Wrapper and switch to the Style panel.

The navigation bar on the top of the Visual editor highlights those CSS sections that have set properties. We’re interested in the last one — the Grid. Click on the grid icon to quickly jump to the Grid section, or simply scroll down the Visual editor.

Grid container section contains all the Grid CSS properties that apply to the container element.

Grid container settings.

In this example we can see that the grid is defined by using just two properties: Template columns (grid-template-columns) and Gap (grid-gap)

Now, let’s change some values to see how they affect the Grid.

Note, besides typing, we can also change the value under the cursor by dragging the slider up and down, or using the UP and DOWN keys (combine the keys with SHIFT to change by 10 units).

For example, change the Template columns to “100px 200px 100px” or try using fr fraction units instead of fixed pixels “100px 200px 1fr”.

Changing container grid properties.

Every change we do is immediately reflected in the page view. That’s the magic of Pinegrow — everything you do is live.

Note, in order for Grid container properties to have any effect on the element, its Display property must be set to grid or inline-grid.

Scrolling down the Visual editor reveals the Grid item section. That section contains Grid properties that affect the individual items within the grid, not the grid container. To see it in action, select one of the grid items on the page, for example, item A.

Let’s select the .a rule and check the Grid item section.

Select the A item and .a rule.

The position of the A item is defined by Row (grid-row) and Column (grid-column) properties.

A is placed in the first row, spanning from the first until the third column line.

Try changing the column to “1 / 2” or just “1”. Then, let’s stretch A over the whole top row, by changing the column to “1 / 4”.

Changing the grid position of the A element.

We can’t really see what’s happening because A is obstructed by B. Let’s get rid of it! Right-click on the B and Delete it.

Easily manipulate HTML, not just CSS.

Can you now enlarge the D item to fill the empty space below the A?

Make D span from the 2nd to the 4th column line.

We opened this example directly from the web. If we want to keep our experiment for later, we can save the page locally.

Grid by Example has many more examples that you can explore in Pinegrow.

In this way, Pinegrow can help us with HTML and CSS experiments. Of course, we can also use it to build and maintain whole HTML & CSS based projects.

As you can see, the CSS Grid support in Pinegrow 4.1 is a bit basic — consisting mainly of input fields for grid properties. We’ll keep improving it further and adding visual helpers. Still, even in the current form, it is surprisingly useful.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade