Skip to main content

CSS Grid Has Never Been Easier: With Pinegrow Web Editor

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.

YouTube video

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/

Recent Posts

  • Pinegrow Countdown: Day 5 – Desktop or Plugin?

    With Pinegrow’s Black Friday sale and the WordPress plugin being released on December 1st, you might be asking yourself which product is right for you. I can’t answer that question for you, but I can help you think through some of the pros and cons of each one and why you might want to use […]

  • Pinegrow Countdown: Day 6 – What’s New

    Pinegrow revealed that they would be releasing both the Pinegrow WordPress Plugin and Pinegrow Desktop 7.0 next week on December 1st. In this video, I share some of the new features in both versions, and I’ll talk a little about pricing and the Black Friday / Cyber Monday sale.

  • WP Tavern Interview on Building Websites With Pinegrow’s New WordPress Plugin

    Last week I had the pleasure of being interviewed by Nathan Wrigley for the WP Tavern podcast. We talked about the upcoming Pinegrow WordPress plugin and how it lets my agency build custom, native WordPress blocks and themes for my clients. #51 – Adam Lowe on Building Websites With Pinegrow’s New WordPress Plugin

  • Peak Performance Digital: Agency Introduction (November 2022 Update)

    This video presents information about my company, Peak Performance Digital. I cover the basics of who we are, what we do, how we operate, and what you can expect when working with us. This video is for companies who might want to hire us to work for them, or agencies who are looking for a white label partner.

  • WordPress Menu Accessibility – Part 2: Detailed Requirements and Final Test

    In this video, I do a deep dive into the requirements to make an accessible Website Navigation Menu. I test the newly released Twenty Twenty-Three theme in WordPress 6.1 and show you the specific test criteria as I go along.