Grid Widths

Grid widths allow you to create a flexible layout for Landing pages.  They must be set when:

  • Creating Section Content
  • Creating Image and Info cards

Section Content grid widths

  • The entire width of the webpage is comprised of 12 sections in total. Section Content can span the entire width of the webpage (Grid Width = 12) or a portion of the page.

    Visualization of 1 unit grid widths
  • Once the Section Content grid is set, everything added to this specific Section Content will live within the selected grid size.

Example

Two Section Contents were added:

  • 8 grid width
  • 4 grid width
Visualization of an 8 and 4 grid width side by side

When content is added to each page section, the following layout results:

Webpage using 8 and 4 grid widths side by side

Image and Info Card grid widths

  • Image and Info Cards also have grid widths 1-12 assigned to them. However, they are rendered in the context of the Section Content grid size.

    NOTE: Image and Info card widths apply to each card in the group.

Example 1

  • Section Content: 12 grid width units applied
  • Info Cards: 2 grid width units
  • 6 Info Cards added
Visualization of 6 Info Cards set to 2 grid units

When content is added to each info card, the following layout results:

Resulting webpage with 6 Info Cards set to 2 grid units

Example 2

  • Section Content: 12 grid width units applied
  • Info Cards: 3 grid width units
  • 8 Info Cards added; only 4 fit on a single row, so the cards wrap
Visualization of 4 Info Cards set to 3 grid units

When content is added to each info card, the following layout results:

Resulting webpage with 4 Info Cards set to 3 grid units

Example 3

  • Section Content: 12 grid width units applied
  • Image Cards: 4 grid width units
  • 6 Image Cards added; only 3 fit on a single row, so the cards wrap
Resulting webpage with 4 Info Cards set to 3 grid units

 

Remember, with these grid widths only 3 Image Cards will fit in a row; when 6 cards are added they will wrap.  

When content is added to each image card, the following layout results:

Resulting webpage with 6 Info Cards set to 4 grid units