# Grid containers?
**URL:** https://forum.pinegrow.com/t/grid-containers/4573
**Category:** Bug Reports
**Created:** [October 2, 2020, 12:03pm UTC](https://forum.pinegrow.com/t/grid-containers/4573 "2020-10-02T12:03:29Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@excede](https://forum.pinegrow.com/u/excede)
#### Post date: [October 2, 2020, 12:03pm UTC](https://forum.pinegrow.com/t/grid-containers/4573/1 "2020-10-02T12:03:30Z")
I’m wondering what grid containers and items do? I have just started to use grids and really impressed but wondering exactly how these work.
Are there any videos or references about how to use these? I have already watched the tutorials on the grid but it didn’t cover what these controls do - or the grid items for that matter. Any resources appreciated.
---
### Author:  [@droidgoo](https://forum.pinegrow.com/u/droidgoo)
#### Post date: [October 2, 2020, 2:37pm UTC](https://forum.pinegrow.com/t/grid-containers/4573/2 "2020-10-02T14:37:19Z")
most of that is redundant to the grid editor that pops up when you hit `CTRL-G`
the items/content icon controls act the same as the one’s for flex box.
the GRID ITEM rules are how you control behavior of elements that exist on the grid (only 1st generation child elements are positioned on the grid).
tutorials for explaining the CSS rules for grid definition and behavior are out there, i’ve found these helpful
> **[Common UI Patterns](https://gridbyexample.com/patterns/)**
> **[Why CSS Grid is better than Bootstrap for creating layouts | Hacker Noon](https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881cf163)**
> **[CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)**
>
> CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
> **[Learn CSS Grid for free - Scrimba.com](https://scrimba.com/learn/R8PTE)**
>
> This tutorial teaches you CSS Grid through 14 interactive screencasts. You'll learn all the key concepts while building three awesome layouts: a website, an image grid, and an article. Plus, you'll learn how to combine CSS Grid with Flexbox.
---
### Author:  [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)
#### Post date: [October 2, 2020, 3:02pm UTC](https://forum.pinegrow.com/t/grid-containers/4573/3 "2020-10-02T15:02:13Z")
> **[CSS Grid](https://cssgrid.io/)**
>
> Learn all about CSS Grid with Wes Bos in this free video series!
A super mini course by Wes Bos sposored Mozilla Firefox so free.
---
### Author:  [@droidgoo](https://forum.pinegrow.com/u/droidgoo)
#### Post date: [October 2, 2020, 4:18pm UTC](https://forum.pinegrow.com/t/grid-containers/4573/4 "2020-10-02T16:18:19Z")
haven’t been thru that one, have you?
is it interactive on screen, or just slide presentation?
---
### Author:  [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)
#### Post date: [October 2, 2020, 5:13pm UTC](https://forum.pinegrow.com/t/grid-containers/4573/5 "2020-10-02T17:13:16Z")
Yes, I took the course last year.
It’s a full course very well-structured and full of resources and videos lessons per topic that must you fallow along him. The author, Wes Bos, has made a lot of quality dev courses. Mozilla sponsored this guy course in order push css-grid usage as Firefox offers the best inspection tool for the grid.
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [October 2, 2020, 6:58pm UTC](https://forum.pinegrow.com/t/grid-containers/4573/6 "2020-10-02T18:58:44Z")
Hi @excede,
So these two sections of the visual editor control the CSS grid styling. The sliders are a little deceiving because most of these controls mostly get used as text input. Most any tutorials on CSS grid will help you out. It is also good to have the active rules open so you can see what styles are applied when you typ in the various input boxes. About the best overview is from [CSS tricks](https://css-tricks.com/snippets/css/complete-guide-grid/).
This might be worthwhile a longer tutorial!
Cheers,
Bob
---
### Author:  [@excede](https://forum.pinegrow.com/u/excede)
#### Post date: [October 3, 2020, 4:50am UTC](https://forum.pinegrow.com/t/grid-containers/4573/7 "2020-10-03T04:50:26Z")
> [@red-rosefields](#):
>
> CSS Grid
Thanks for your suggestions, I appreciate it!
---
### Author:  [@excede](https://forum.pinegrow.com/u/excede)
#### Post date: [October 3, 2020, 4:51am UTC](https://forum.pinegrow.com/t/grid-containers/4573/8 "2020-10-03T04:51:01Z")
Definitely going to do this course today! Thanks very much.
---
### Author:  [@droidgoo](https://forum.pinegrow.com/u/droidgoo)
#### Post date: [October 3, 2020, 11:48pm UTC](https://forum.pinegrow.com/t/grid-containers/4573/9 "2020-10-03T23:48:53Z")
so i signed up and started the course and even before we get to any content related to grid, there is a great deal of setup and it’s not entirely clear how to arrange my workflow so i can follow along.
the scrimba course is nice because it’s shorter (yay) but it’s all done right in your browser via an interactive kind of codepen like environment where you flip back and forth between watching the video and playing with the code in real time.
i think it’s much easier to follow and learn from, at least is was to me at the time.
duplicating the html and css in PG gave me even greater insights, and taught me how to use the PG interface at the same time.
it’s much easier to get started and if you feel like it wasn’t enough, there’s always the wes bos site where you can zero in on the specific topic you want to know more about.
my 2 cents.
UPDATE: skipping ahead to wes bos’ lesson 10, on placing grid items was super helpful and introduced me to the firefox inspector tool which will show you how your items are placed on the grid.
the best part is it differentiates between the explicit grid (that you define) and the implicit grid (that css will define for you, if need be).
this is helpful because some of the placement rules will behave differently when placing things on the grid depending on if it’s going off what you told it, vs making it up on the fly.
the line at the end of the LAST row is not necessarily -1… it depends on explicit vs implicit.
the line -1 is the end of the explicit grid and items automatically placed after that are not addressable via the negative number scheme… same goes for columns if you have auto-fill working for you the -1 grid line might not be where you expect to be.
going to make a feature request for PG to show us this somehow, the way firefox does.