Grid Layout Section

Grid Layout Section

Last updated 03.29.24

Sections are the page building frameworks that hold widgets. This Grid Layout section automatically creates a grid of cells to your specifications. 

  • Holds widgets inside gridded cells 
  • Extremely flexible building framework 
  • Key properties are number and size of cells, background color/image, margins and padding
The Grid Layout is very powerful to allow for endless customization of the page design. Explore the Grid Layout Tips here >

Related Links & Videos

How to add a Grid Layout Section


1. Select where on the page you would like add a section 
2. Click on the gray plus add section icon. Hover over and click to select Grid Layout 
3. A preliminary Grid Layout appears on the page. Use the gear-shaped properties icon to adjust the settings. 

Grid Layout Section Properties

5. In the Grid Layout Section properties pop up adjust the number of columns, their width, margins and padding.
6. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.

How to add content to a Grid Layout

1. Open pane where you want the widget to appear 
2. Click on the blue plus add widget icon  
3. Select the widget from the widget pop up and adjust its properties as usual 
4. Click Apply button 

How to delete the Grid Layout Section

Hover over the Grid Layout Section until it displays the properties and trash icons and click on the trash icon to delete. 

How to reposition the Grid Layout Section

Hover over the Grid Layout Section until it displays the grab icon on the left. Simply drag and drop in a new location. 

How to change section types

Hover over the Grid Layout Section until it displays the change section type icon. Click to select.

Grid Layout Section Properties

PROPERTYDESCRIPTION
CELLS SETTING
Number of Columns		Select from 1-12 columns
Cell SizingSelect from options:
  • Manual (set each cell size individually using percentages) 
  • Block Grid (automatic evenly sized images in defined rows)
Enable Offset
(Manual Cell Sizing Only)		Check to include an offset to the grid cell which can move it to the left or right on the page – offset spacing settings below
Cell 1 Width (Large)
Cell 1 Width (Medium)
Cell 1 Width (Small)		When Manual Cell Sizing is selected, list will display individual cell settings for each of the up to 12 columns
Select from sizes: 
  • 1 (8%) 
  • 2 (16%)
  • 3 (25%)
  • 4 (33%)
  • 5 (42%)
  • 6 (50%)
  • 7 (58%)
  • 8 (66%)
  • 9 (75%)
  • 10 (83%)
  • 11 (92%) 
  • 12 (100%)
Items per row (Large screens)
Items per row (Medium screens)
Items per row (Small screens)		When Block Grid is selected, list will display automatically even row settings for all cells
Select from 1-12 items per row for each screen size
DirectionSelect from:
  • Horizontal – arranges cells in horizontal row
  • Vertical – stacks cells in vertical row
Use Grid ContainerTo make grid full width of the screen (not contained) uncheck box. The grid container manages the responsive margins to the left and right of the grid content.
Select Grid Container width:
  • Default
  • Fluid 
  • Full 
Gutter TypeSelect your automatic padding or margins. These settings fine-tune the spacing between content elements in the section to control the design. Check to activate:
  • Grid padding X
  • Grid padding Y
  • Grid Margin X 
  • Grid Margin Y 
Gutter CollapseCheck to activate:
  • Large padding collapse     
  • Medium padding collapse     
  • Small padding collapse
  • Large margin collapse     
  • Medium margin collapse     
  • Small margin collapse
Enable BackgroundCheck to enable background for entire section filling the full-width of the page
Background ColorThe background color attribute effects the color behind the entire grid layout to the full width of the page. Initially, Default is selected, which is no color added. Select from your custom brand colors or grayscale options from the menu. Additionally, you can select any color by adding the hexidecimal color code. Below is the list of Background colors that can be selected:
  • Default (None) 
  • Primary 
  • Primary Color - Light 
  • Primary Color - Dark 
  • Secondary 
  • Secondary - Light 
  • Secondary - Dark 
  • Gradient 
  • White 
  • Light Gray 
  • Medium Gray 
  • Dark Gray 
  • Black 
  • Custom (enter color in hex format – ex. #2c6090)
Background Image SmallClicking the Select button opens a dialog box allowing you to select an image via the Media Library Application. Image should not be more than 100kb in file size.
Background Image MediumClicking the Select button opens a dialog box allowing you to select an image via the Media Library Application. Image should not be more than 100kb in file size.
Background Image LargeClicking the Select button opens a dialog box allowing you to select an image via the Media Library Application. Image should not be more than 100kb in file size.
Custom CSSCode provided by the Atlas development team to achieve custom effects
MarginUse margins to increase spacing between the Grid Layout Section and other sections on the page. This is helpful to provide visual room between elements and increase readability.

Top
User can select from 1-5 rems to increase spacing above the tabbed layout

Bottom
User can select from 1-5 rems to increase spacing below the tabbed layout

Right
User can select from 1-5 rems to increase to the right of the tabbed layout

Left
User can select from 1-5 rems to increase spacing to the left of the tabbed layout
PaddingUse padding to increase spacing within the Grid Layout Section background area. This is especially useful when using a background color to provide content grouping and visual space for readability.

Top
User can select from 1-5 rems to increase room in the top of the tabbed layout background area

Bottom
User can select from 1-5 rems to increase room in the bottom of the tabbed layout background area

Right
User can select from 1-5 rems to increase room in the right of the tabbed layout background area

Left
User can select from 1-5 rems to increase room in the left of the tabbed layout background area
INNER GRID PROPERTIESCheck box to Use Inner Grid and activate inner grid settings below
Use Padding [inner grid]Check box to use Padding to increase spacing within the inner grid background area

Top
User can select from 1-5 rems to increase room in the top of the inner grid background area

Bottom
User can select from 1-5 rems to increase room in the bottom of the inner grid background area

Right
User can select from 1-5 rems to increase room in the right of the inner grid background area

Left
User can select from 1-5 rems to increase room in the left of the inner grid background area
Use Margin [inner grid]Use margins to increase spacing between inner grid cells. This is helpful to provide visual room between elements and increase readability.

Top
User can select from 1-5 rems to increase spacing above the tabbed layout

Bottom
User can select from 1-5 rems to increase spacing below the tabbed layout

Right
User can select from 1-5 rems to increase to the right of the tabbed layout

Left
User can select from 1-5 rems to increase spacing to the left of the tabbed layout
Use Cell Sizing [inner grid]
Cell Sizing (Large screens)
Cell Sizing (Medium screens)
Cell Sizing (Small screens)		Size the cells of the inner grid. Select from sizes:
  • 1 (8%) 
  • 2 (16%) 
  • 3 (25%) 
  • 4 (33%) 
  • 5 (42%) 
  • 6 (50%) 
  • 7 (58%) 
  • 8 (66%) 
  • 9 (75%) 
  • 10 (83%) 
  • 11 (92%) 
  • 12 (100%)

Background Color The background color attribute effects the color within the inner grid. Initially, Default is selected, which is no color added. Select from your custom brand colors or grayscale options from the menu. Additionally, you can select any color by adding the hexidecimal color code. Below is the list of Background colors that can be selected:
  • Default (None) 
  • Primary 
  • Primary Color - Light 
  • Primary Color - Dark 
  • Secondary 
  • Secondary - Light 
  • Secondary - Dark 
  • Gradient 
  • White 
  • Light Gray 
  • Medium Gray 
  • Dark Gray 
  • Black 
  • Custom (enter color in hex format – ex. #2c6090)

Examples

1 Column Grid Example

In this example there is a Image Editable Widget dropped into the 1 column grid.

2 Column Grid Example

The grid is set up with a 66% left and 33% right two column with a background color.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  

5 Column Grid Example

This example contains five columns. The first is full-width and the rest are set to 25% to be four across in the desktop view.

Grid Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Grid Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Grid Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.