Tutorial - Using CSS Grid in Pinegrow

Hi All,
A write-up and set of videos have been posted in the tutorials here.
Feel free to comment or ask questions!
Bob

3 Likes

great and thanks, until now I never heard about the CSS Grid, I always thougt: another boring explanation about how a grid is made with 12 columns like bootstrap. But, no, it is far from that so really freaking interesting, opens a new world. Thanks Pinegrow for all taking so much effort in making videos which give me a start in another many more hours of fun with webdesign. So it started me thinking about how to combine bootstrap 4 with grid and flex and WP…Starter Theme 2 in grid form :slight_smile: :heart_eyes:

1 Like

You are welcome @mazzel !

Great tutorials. Any way to make the grid dark, more visible? I can barely see it.

Hi @kat,
There aren’t any settings for this, but we might consider adding some in the future. There is a hack that you could use. If you are using grid a lot on a page and want it to be more visible you can add this to the head section of your page - just remember to remove it for final production!

<style>
	.pinegrow-ui-helper.pinegrow-ui-helper-css-grid-cell {
		color: black;
		outline-width: 2px !important;
	}
</style>

You can change the color (depending on background you could change it to red or purple) or width to make it easier for you to see on the page. You may only need to change just the color, if so, just delete the outline-width. The outline-width will have some impact on highlighting of other objects on the page. I don’t think changing the color will.
Cheers,
Bob

1 Like

CSS Grid hack is so cool. Thank you, Rob.

Hi @kat,
No problem - you should only need to use it for a day or two more - :wink:
Cheers,
Bob

1 Like