# Tutorial - Using CSS Grid in Pinegrow

**URL:** https://forum.pinegrow.com/t/tutorial-using-css-grid-in-pinegrow/4736
**Category:** Tutorials
**Created:** [November 30, 2020, 10:02am UTC](https://forum.pinegrow.com/t/tutorial-using-css-grid-in-pinegrow/4736 "2020-11-30T10:02:09Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [November 30, 2020, 10:02am UTC](https://forum.pinegrow.com/t/tutorial-using-css-grid-in-pinegrow/4736/1 "2020-11-30T10:02:09Z")

</div>

Hi All,  
A write-up and set of videos have been posted in the tutorials [here](https://pinegrow.com/docs/css-grid/tutorials/creating-a-css-grid-layout-in-pinegrow/).  
Feel free to comment or ask questions!  
Bob

---

<div class="post-metadata">

### Author: ![mazzel](https://avatars.discourse-cdn.com/v4/letter/m/58956e/32.png) [@mazzel](https://forum.pinegrow.com/u/mazzel)
#### Post date: [December 15, 2020, 8:12am UTC](https://forum.pinegrow.com/t/tutorial-using-css-grid-in-pinegrow/4736/2 "2020-12-15T08:12:45Z")

</div>

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 🙂 😍

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [December 15, 2020, 10:36am UTC](https://forum.pinegrow.com/t/tutorial-using-css-grid-in-pinegrow/4736/3 "2020-12-15T10:36:11Z")

</div>

You are welcome @mazzel !

---

<div class="post-metadata">

### Author: ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [July 27, 2021, 1:10am UTC](https://forum.pinegrow.com/t/tutorial-using-css-grid-in-pinegrow/4736/4 "2021-07-27T01:10:59Z")

</div>

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

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [July 27, 2021, 9:51am UTC](https://forum.pinegrow.com/t/tutorial-using-css-grid-in-pinegrow/4736/5 "2021-07-27T09:51:52Z")

</div>

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!

```auto
<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

---

<div class="post-metadata">

### Author: ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [July 27, 2021, 8:35pm UTC](https://forum.pinegrow.com/t/tutorial-using-css-grid-in-pinegrow/4736/6 "2021-07-27T20:35:31Z")

</div>

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

 ![Screen Shot 2021-07-27 at 1.33.35 PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/0100a5d4ecae6625afd807cd65af823b6d548f1b.jpeg)

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [July 28, 2021, 9:08am UTC](https://forum.pinegrow.com/t/tutorial-using-css-grid-in-pinegrow/4736/7 "2021-07-28T09:08:05Z")

</div>

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