Grid Cells

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.

Grid Cell Selection.JPG

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:

  • Grid
  • Inline Block Container
  • Button
  • Modal Pop-up
  • Text
  • Text Card
  • Map Card
  • Picture
  • Picture with Text
  • Category Tiles
  • Banner Carousel
  • Category List Banner
  • Category Compat Tag Banner
  • Contact Form
  • FAQ
  • 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.

Examples

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 2_4.JPG
grid-row: 1 / span 2
The cell will span across the first and second rows:
grid-row 1_span2.JPG
grid-column: 1 / 3
The cell will span across the first and second columns:
grid-column 1_3.JPG
grid-column: 2 / span 2
The cell will span across the second and third columns, leaving the first column empty:
grid-column 2_span2.JPG

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.

sample cell options with drop shadow.JPG

Finally, each cell can have it’s own drop shadow outline.