How to Learn CSS Grid with Pinegrow
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”.
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:
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.
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.
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”.
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.
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”.
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.
Can you now enlarge the D item to fill the empty space below the A?
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.