Please
note: We will be transitioning
to the new grids fall
2026. We are replacing our float-based
grids with css / flex grids. The look of
the grids has changed within the
editing environment.
Four Grid Snippets
There
are four
grid
snippets
from which
to
choose:
- 1
Column Layout
- 2
Column Layout: 50-50, 66-33,
33-66,
75-25, 25-75
- 3
Column Layout
- 4
Column Layout
New grid features:
- Drag-and-drop functionality: Reposition grid layouts using the drag
handle (the series of blue
dots).
- Flexible row management: Add or
delete multiple rows within a grid
layout. Individual columns cannot be
added or removed.
- Expanded styling options: Apply
treatments to individual rows or
entire sections. However, all rows
within a section share the same
treatment; different row treatments
cannot be applied within a single
section.
| Old grid format | New grid format |
|---|---|
Please note: Grids are to
be
used primarily for placing images
and
content
on your page.
Step-by-step
guide
1
Column Grid
Layout
- Click
on
Edit
Content. - Insert your text cursor
where you wish your grid to
appear.
- Click
on the puzzle piece
snippet and
select 1 Column Layout. Click Insert. - Select
the Treatment
target from
the
drop
down menu: None,
Section,
Row
- Select
the Treatment
options from
the
drop
down menu: None;
Divider,
Divider
+
Bordered,
Divider
+
Shaded,
Bordered,
Shaded
- Within
the content field,
add
your content.
Need to
add a
row to
this
section? See
the directions
below.
2 Column
Grid
Layout
- Click on Edit
Content.
- Insert your text cursor where you wish your grid to appear.
- Click
on the puzzle piece snippet and
select 2 Column Layout. Click Insert.
- Select Grid
layout
options from
the
drop
down: 50-50,
66-33,
33-66,
75-25,
25-75
- Select
the Treatment
target from
the
drop
down: None, Section,
Row,
Column,
Left
Column,
Right
Column
- Select
the Treatment
options from
the
drop
down: None;
Divider, Divider
+
Bordered, Divider
+
Shaded, Bordered, Shaded
- Within the content field, add your text or images.
Please
note: Within
the edit mode,
the layout
will appear to
be equal;
however, options are
not 50-50,
will be
transformed
accordingly when
previewed.
Need to
add a
row to
this
section? See
the directions
below.
3 Column
Grid
Layout
- Click on Edit
Content.
- Insert your text cursor where you wish your grid to appear.
- Click
on the puzzle piece snippet and
select 2 Column Layout. Click Insert.
- Select
the Treatment
target from
the
drop
down: None,
Section,
Row
- Select
the Treatment
options from
the
drop
down: None;
Divider,
Divider
+
Bordered,
Divider
+
Shaded,
Bordered,
Shaded
- Within
the
content
field,
add
your
text
or
images.
Need to
add a
row to
this
section? See
the directions
below.
4 Column
Grid
Layout
- Click on Edit
Content.
- Insert your text cursor where you wish your grid to appear.
- Click
on the puzzle piece snippet and
select 4 Column Layout. Click Insert.
- Select
the Treatment
target from
the
drop
down: None,
Section,
Row
- Select
the Treatment
options from
the
drop
down: None;
Divider,
Divider
+
Bordered,
Divider
+
Shaded,
Bordered,
Shaded
- Within
the
content
field,
add
your
text
or
images.
Please note: The 4 column grid is reserved for text and images only.
Need to
add a
row to
this
section? See
the directions
below.
Inserting or deleting a row
Inserting a row
Click
on the Insert
row
after symbol.
Deleting a row
Click
on the Delete row symbol.
Add
content
or
images
to
the column. Please note: Your
treatment
target
and
options
will
be
applied
to all
rows
within
the
section.