Grid Row (grid_row)
Use our flexible grid system to structure website content. The grid is mobile-first, powered by flexbox, and based on a 12-column system.
🔗 External documentation.
| ID | Label | Description | Schema |
|---|---|---|---|
| content | Content | The content of each column | |
| with_container | With container? | Is the row wrapped in a container? |
|
| gutters | Gutters | Add grid-gap to a grid row to add a gap (or gutter) between each column in the row. The default gap width is 2 units and 4 units at desktop and higher. Customize the width of the gap by adjusting the value of $theme-column-gap in project settings as shown in the following example. |
|
| offsetting | Offsetting Columns | .grid-offset-[1-12] offsets an item by the specified number of grid columns as shown in the following example. |
|
| card | Card |
|
|
| card_lg | Card Large |
|
|
| mobile | Mobile |
|
|
| mobile_lg | Mobile Large |
|
|
| tablet | Tablet |
|
|
| tablet_lg | Tablet Large |
|
|
| desktop | Desktop Large |
|
|
| desktop_lg | Desktop Large |
|
|
| widescreen | Widescreen |
|
id: grid_row
label: 'Grid Row'
description: 'Use our flexible grid system to structure website content. The grid is mobile-first, powered by flexbox, and based on a 12-column system.'
group: Layout
homepage: 'https://designsystem.digital.gov/utilities/layout-grid/'
slots:
content:
id: content
label: Content
description: 'The content of each column'
props:
with_container:
id: with_container
label: 'With container?'
description: 'Is the row wrapped in a container?'
schema:
type: boolean
gutters:
id: gutters
label: Gutters
description: 'Add grid-gap to a grid row to add a gap (or gutter) between each column in the row. The default gap width is 2 units and 4 units at desktop and higher. Customize the width of the gap by adjusting the value of $theme-column-gap in project settings as shown in the following example.'
schema:
type: string
enum:
- grid-gap-05
- grid-gap-1
- grid-gap-2
- grid-gap-3
- grid-gap-4
- grid-gap-5
- grid-gap-6
offsetting:
id: offsetting
label: 'Offsetting Columns'
description: '.grid-offset-[1-12] offsets an item by the specified number of grid columns as shown in the following example.'
schema:
type: string
enum:
- grid-offset-1
- grid-offset-2
- grid-offset-3
- grid-offset-4
- grid-offset-5
- grid-offset-6
- grid-offset-7
- grid-offset-8
- grid-offset-9
- grid-offset-10
- grid-offset-11
- grid-offset-12
card:
id: card
label: Card
schema:
type: string
enum:
- 'card:grid-col-auto'
- 'card:grid-col-fill'
- 'card:grid-col-1'
- 'card:grid-col-2'
- 'card:grid-col-3'
- 'card:grid-col-4'
- 'card:grid-col-5'
- 'card:grid-col-6'
- 'card:grid-col-7'
- 'card:grid-col-8'
- 'card:grid-col-9'
- 'card:grid-col-10'
- 'card:grid-col-11'
- 'card:grid-col-12'
card_lg:
id: card_lg
label: 'Card Large'
schema:
type: string
enum:
- 'card-lg:grid-col-auto'
- 'card-lg:grid-col-fill'
- 'card-lg:grid-col-1'
- 'card-lg:grid-col-2'
- 'card-lg:grid-col-3'
- 'card-lg:grid-col-4'
- 'card-lg:grid-col-5'
- 'card-lg:grid-col-6'
- 'card-lg:grid-col-7'
- 'card-lg:grid-col-8'
- 'card-lg:grid-col-9'
- 'card-lg:grid-col-10'
- 'card-lg:grid-col-11'
- 'card-lg:grid-col-12'
mobile:
id: mobile
label: Mobile
schema:
type: string
enum:
- grid-col-auto
- grid-col-fill
- grid-col-1
- grid-col-2
- grid-col-3
- grid-col-4
- grid-col-5
- grid-col-6
- grid-col-7
- grid-col-8
- grid-col-9
- grid-col-10
- grid-col-11
- grid-col-12
mobile_lg:
id: mobile_lg
label: 'Mobile Large'
schema:
type: string
enum:
- 'mobile-lg:grid-col-auto'
- 'mobile-lg:grid-col-fill'
- 'mobile-lg:grid-col-1'
- 'mobile-lg:grid-col-2'
- 'mobile-lg:grid-col-3'
- 'mobile-lg:grid-col-4'
- 'mobile-lg:grid-col-5'
- 'mobile-lg:grid-col-6'
- 'mobile-lg:grid-col-7'
- 'mobile-lg:grid-col-8'
- 'mobile-lg:grid-col-9'
- 'mobile-lg:grid-col-10'
- 'mobile-lg:grid-col-11'
- 'mobile-lg:grid-col-12'
tablet:
id: tablet
label: Tablet
schema:
type: string
enum:
- 'tablet:grid-col-auto'
- 'tablet:grid-col-fill'
- 'tablet:grid-col-1'
- 'tablet:grid-col-2'
- 'tablet:grid-col-3'
- 'tablet:grid-col-4'
- 'tablet:grid-col-5'
- 'tablet:grid-col-6'
- 'tablet:grid-col-7'
- 'tablet:grid-col-8'
- 'tablet:grid-col-9'
- 'tablet:grid-col-10'
- 'tablet:grid-col-11'
- 'tablet:grid-col-12'
tablet_lg:
id: tablet_lg
label: 'Tablet Large'
schema:
type: string
enum:
- 'tablet-lg:grid-col-auto'
- 'tablet-lg:grid-col-fill'
- 'tablet-lg:grid-col-1'
- 'tablet-lg:grid-col-2'
- 'tablet-lg:grid-col-3'
- 'tablet-lg:grid-col-4'
- 'tablet-lg:grid-col-5'
- 'tablet-lg:grid-col-6'
- 'tablet-lg:grid-col-7'
- 'tablet-lg:grid-col-8'
- 'tablet-lg:grid-col-9'
- 'tablet-lg:grid-col-10'
- 'tablet-lg:grid-col-11'
- 'tablet-lg:grid-col-12'
desktop:
id: desktop
label: 'Desktop Large'
schema:
type: string
enum:
- 'desktop:grid-col-auto'
- 'desktop:grid-col-fill'
- 'desktop:grid-col-1'
- 'desktop:grid-col-2'
- 'desktop:grid-col-3'
- 'desktop:grid-col-4'
- 'desktop:grid-col-5'
- 'desktop:grid-col-6'
- 'desktop:grid-col-7'
- 'desktop:grid-col-8'
- 'desktop:grid-col-9'
- 'desktop:grid-col-10'
- 'desktop:grid-col-11'
- 'desktop:grid-col-12'
desktop_lg:
id: desktop_lg
label: 'Desktop Large'
schema:
type: string
enum:
- 'desktop-lg:grid-col-auto'
- 'desktop-lg:grid-col-fill'
- 'desktop-lg:grid-col-1'
- 'desktop-lg:grid-col-2'
- 'desktop-lg:grid-col-3'
- 'desktop-lg:grid-col-4'
- 'desktop-lg:grid-col-5'
- 'desktop-lg:grid-col-6'
- 'desktop-lg:grid-col-7'
- 'desktop-lg:grid-col-8'
- 'desktop-lg:grid-col-9'
- 'desktop-lg:grid-col-10'
- 'desktop-lg:grid-col-11'
- 'desktop-lg:grid-col-12'
widescreen:
id: widescreen
label: Widescreen
schema:
type: string
enum:
- 'widescreen:grid-col-auto'
- 'widescreen:grid-col-fill'
- 'widescreen:grid-col-1'
- 'widescreen:grid-col-2'
- 'widescreen:grid-col-3'
- 'widescreen:grid-col-4'
- 'widescreen:grid-col-5'
- 'widescreen:grid-col-6'
- 'widescreen:grid-col-7'
- 'widescreen:grid-col-8'
- 'widescreen:grid-col-9'
- 'widescreen:grid-col-10'
- 'widescreen:grid-col-11'
- 'widescreen:grid-col-12'
examples:
preview:
id: preview
label: Preview
renderable:
'@component': grid_row
content:
-
'@component': card
'@variant': default
header: Featured
image:
'@element': img
src: 'data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=='
alt: '© 2017 John Smith photography'
content:
-
'@template': '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>'
footer: 'Visit Florida Keys'
footer_url: '#'
header_exdent: true
heading_level: 2
media_exdent: true
body_exdent: true
-
'@component': card
'@variant': default
header: Featured
image:
'@element': img
src: 'data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=='
alt: '© 2017 John Smith photography'
content:
-
'@template': '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>'
footer: 'Visit Florida Keys'
footer_url: '#'
header_exdent: true
heading_level: 2
media_exdent: true
body_exdent: true
-
'@component': card
'@variant': default
header: Featured
image:
'@element': img
src: 'data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=='
alt: '© 2017 John Smith photography'
content:
-
'@template': '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>'
footer: 'Visit Florida Keys'
footer_url: '#'
header_exdent: true
heading_level: 2
media_exdent: true
body_exdent: true
-
'@component': card
'@variant': default
header: Featured
image:
'@element': img
src: 'data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=='
alt: '© 2017 John Smith photography'
content:
-
'@template': '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>'
footer: 'Visit Florida Keys'
footer_url: '#'
header_exdent: true
heading_level: 2
media_exdent: true
body_exdent: true
gutters: grid-gap-05
offsetting: grid-offset-1
mobile: grid-col-3
tablet: 'tablet:grid-col-6'
desktop: 'desktop:grid-col-6'
Featured
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
Featured
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
Featured
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
Featured
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.