The only possible child pod option for a Grid to have is a Grid Cell. A grid can have as many cells as needed for proper design and the way the cells are arranged within the grid is managed on the grid level, which you can read more about here.
A Grid Cell behaves similarly to a Page Section in that it can contain almost all the same child pods. The only exception is a Quote pod, which cannot be contained by a Grid Cell. The full list of all the various pods a Grid cell can contain are listed below:
- Inline Block Container
- Modal Pop-up
- Text Card
- Map Card
- Picture with Text
- Category Tiles
- Banner Carousel
- Category List Banner
- Category Compat Tag Banner
- Contact Form
- Social Media Icons
- Security Badge
- Country Switch
On the grid cell itself, you can control the cell’s size and location within the parent grid via the following two CSS settings:
- grid-column - specifies the start/end and span of the cell across columns
- grid-row - specifies the start/end and span of the cell across rows
You can leave these values blank, in which case the cells will be automatically arranged within the grid - the most common option - or you can specify the relative positions.
To specify the start and end position for the cell you would enter an integer value separated with a forward slash. Either the start or the end can also be instead replaced by a span.
grid-row: 2 / 4
The cell will span across the second and third rows. The next cells in the sequence will shift over to fill the first row:
grid-row: 1 / span 2
The cell will span across the first and second rows:
grid-column: 1 / 3
The cell will span across the first and second columns:
grid-column: 2 / span 2
The cell will span across the second and third columns, leaving the first column empty:
As mentioned in the list above, a grid cell can also contain another grid, which will allow you to control the layout of content within each cell. This can get very complicated so it might be helpful to sketch out the design before starting to configure it.
Finally, each cell can have it’s own drop shadow outline.
Read more about how Steersman can help your business stand out:
Ecommerce SEO strategy - What is SEO
What is SEO, how to improve your site's ranking, and how Steersman helps you attract more traffic.
How do Odoo E-Commerce Sites from Steersman Rank?
Odoo e-commerce sites from Steersman will get you the best performance, structure, and SEO in the world. See the ratings for yourself.