< Back to All Pod Tutorials

Grid Cells

A Grid Cell is the only child pod option for a Grid. However, you can put most child pods within the Grid Cell.

Adding your Grid Cell pod

Once you’ve added in your Grid pod, the only option you will have is to add in your Grid Cell.

Once your Grid Cell is added, you can add your content. 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 a Grid Cell cannot contain. The complete list of all the various pods a Grid Cell can contain is listed below:

Grid Cell template

Pods tab

1. Internal Name: This title will not be visible on the website; it is only used for organizing your content.
2. Share: If you flag this pod, your chosen content and settings will be saved to be added easily throughout your website. *If you need to change this pod, you can adjust it in one instance, and it will automatically be updated throughout the site.
3. Child pod/Component: You will add your content here.

Options tab

1. grid-column: specifies the start/end and span of the cell across columns
2. grid-row: specifies the start/end and span of the cell across rows
3. Drop shadow: Flagging this will apply a drop shadow around the entire grid cell.

The “grid-column” and grid-row” fields can be left empty; in this case, the cells will be automatically arranged within the grid – this will be the most common option – but you can specify the relative positions.

The “grid-column” and “grid-row” properties can be specified as one or two values. If you use two values, they must be separated by a forward slash.

“Grid-column” and “grid-rows” allow many possibilities to customize grids, but it can get complicated. This article will show some basic examples and provide links for further reading.

grid-column

The “grid-column” property is shorthand for “grid-column-start” and “grid-column-end,” which is the Grid Cell’s starting and ending position.

The grid column uses values to set the start and end placement for the cell.

Example 1

Grid-column: 2 / 4

Grid Cell 2 starts at column two and ends at column four.

Example 2

Grid-column: 2 / span 4

Using “span” will extend a cell for that many columns. Here, Grid Cell 2 will span four columns.

You can learn more about the CSS for the “grid-column” by reading the documentation below.

grid-column CSS

grid-column-start CSS

grid-column-end CSS

grid-row

The “grid-row” specifies the Grid Cell’s start and end position within the grid.

Example 1

grid-row: 1 / 3

Grid Cell 1 starts at row one and ends at row three.

Example 2

grid-row: 1 / span 3

Grid Cell 1 starts at row one and spans three rows.

You can learn more about the CSS for the “grid-row” by reading the documentation below.

grid-row CSS

grid-row-start CSS

grid-row-end CSS

*Each grid example on this page has a “grid-gap” of 10px to show the separation of grid cells.

Save and publish

To see your updated content on your website, you need to publish your page. In the Websites App, click on the Publish tab. Once there, click the Create button. On the next screen, you will select the website you want the page to publish to (if you have multiple websites) and check the Pages checkbox. Click Save at the top, then click Start.