CSS Grid Has Never Been Easier: With Pinegrow Web Editor

This is going to sound ridiculous, but in my opinion, one of the coolest features in Pinegrow has nothing to do with WordPress. It’s actually their CSS Grid Editor.

Have I lost you yet? You are probably either rolling your eyes saying, “seriously, CSS Grid?” or you look like a deer in headlights saying, “ugh, CSS Grid.”

For a long time, I couldn’t wrap my head around how CSS Grid works. Sure, I could fumble my way around it or copy paste someone else’s code to do what I want, but it just never really clicked with me. This was back in 2019 when browser support for CSS Grid was still iffy. And I was only then starting to make the jump from Elementor to the Oxygen Builder for my WordPress work.

It was actually around then that I had my first run-in with Pinegrow. I somehow found a 10-lesson CSS Grid course they created, and that’s when it all started making sense. I’ll drop a link to that course and to a CSS Grid tutorial project of theirs in the video description below. Whether or not you use Pinegrow, the material is all great, and it’s platform-agnostic.

To this day, I still think Pinegrow’s visual implementation of CSS Grid is head and shoulders above any other that I’ve seen.

I’m not going to do a full demonstration here because it’s such a huge topic. Besides, Pinegrow’s own videos and written tutorials are already fantastic. So instead, I’ll just show you a few highlights.

I’ll start off with the “Summer Nights” project, which I’ve linked below.

Demonstration Start

All right! Here inside Pinegrow, I have the summer nights project loaded. I’m going to open up the start.html and the finish.html. You’ll see with start.html We have just the elements in there with no styling. And when we opened up finished, we’ve got a fully styled and laid out page.

So let’s come back to start. And the first thing that I want to do is create a grid to hold all these elements. And I’ll do that right here on the body element. So I’ll select the element in the tree view, and I’ll create a CSS rule Called MyBody. Now it’s going to create that rule and apply it to the body element.

Creating your first CSS Grid

Now I’ll come down here, and I’ll click on their edit CSS grid button. I’m going to select our MyBody rule and create a CSS grid. You’ll see right away, it’s created three columns and one row. I want five columns and four rows, so I’ll click this little plus button just to add two more columns and four more rows.

Something you might notice right away is we can click on any of these cells, and not only are they highlighted in the preview area, but we can also name them right here. So we can name our cells as well as our vertical and horizontal tracks. This makes it super easy just to take an element and tell it that you want it to live inside of a certain area.

I can also double-click on any of the columns or rows. And you can see all the different spacing units and functions that we have to choose from. If there’s something in here that you don’t want, you don’t need to use any of them. You can just grab something. And change the text inside of the dialog box. Or, just type whatever you want in the dialog box, to begin with. And you can see as I’m doing that. It changed their properties over here inside the rule. For now, I’ll close this up so we can see what we’re doing a little bit better.

I’m going to start by selecting our image. And we want this image to span all the way across and three rows down. Right now, it has this “A” around all of them. And that means that all four boundaries are automatically set. I want to set the heightened with of this to be 100%. So we’ll come down here to our CSS editor. And change that to 100%. And 100%.

And you can see that it’s applied those styles in line. I don’t really want them in line I want them inside of a rule. So I’ll just give it a name, call it MyImage. And you can see that it’s going to add that class MyImage to the selected element. And it’s going to save these inline styles through to the rule.

Positioning Elements Manually

The next thing I’m going to do is just grab the tabs and drag them over to the tracks where I want them to live on the grid. I’ll start by grabbing this bottom one. And I’ll grab the one on the right and bring it all the way over. You’ll notice that we’re stretched out a little bit funny. So I’ll come back, and I’ll make sure that MyImage is selected. And I’ll just change Object Fit to cover.

Named Areas

The next thing I want to do is place our heading right here inside of this cell and this cell. And to do that, I’m going to use our track names. So I’ll come back to our CSS grid. And I’ll give this a name of heading. and heading. Now that I have the heading defined inside the CSS grid, all I need to do to position this is to right-click on it, come down to CSS grid, and say heading. And you’ll see this moves exactly where it needs to be.

I’ll do the same here for the byline. I’ll call this byline. Take our byline element, right-click on it, CSS grid, and byline. So this is a great way to position things throughout a CSS grid.

In today’s demo, I haven’t gone into the details of how to use any of the min-max functions, but those are also fantastic when you have things like a post grid or something else where you’re trying to lay things out in a responsive way when you don’t exactly know what the size of it’s going to be or how many elements there are going to be.

A Look at the finished project

So now we’re just going to close out of this start page. I’ll come over to the finished project, and I’ll open up the CSS grid on the body because I want to show you what they’ve done here.

They’ve laid out named areas for the logo, the menu, title author, paragraph text, and a quote. They’ve also named some of the tracks here. So we’ve got the start and end of the header track as well as the start and end of the header track vertically.

CSS Grid Tutorial

This is a great way to set up a page layout, and I love how easy Pinegrow makes it to do. As I mentioned before, Pinegrow has this fantastic course on the website about learning CSS grid. It’s 10 easy-to-follow videos that cover just about everything from defining the grid, building your page positioning things, using dynamic column sizing using fractional units, working with your min maxes, working with your auto rows, and then finally polishing everything up.

Whether you use Pinegrow or not. I’d definitely recommend taking a look at this tutorial since all of it really is platform agnostic. If Pinegrow is something that you’re even remotely interested in, I would say that it’s also worth picking up a trial copy just to do the tutorial because their implementation of CSS grid is just so easy to use. And while you’re at it, you’re also learning your way around the Pinegrow interface.

As always, if you found this video helpful, please like and subscribe or leave a comment down below. And I’ll see you next time.

🧰 Resources:

• https://pinegrow.com/courses/learn-css-grid-with-pinegrow/
• https://docs.pinegrow.com/docs/css-grid/tutorials/creating-a-css-grid-layout-in-pinegrow/