Gutters

Gutters control spacing between grid columns. Responsive Style provides gutter classes and CSS Variables for dynamic adjustments:

Variable	Default	Description
--ms-gutter-x	1.5rem	Horizontal column gutter
--ms-gutter-y	0	Vertical row gutter

Horizontal Gutters

Use .gx-* classes. For larger gutters, add padding to parent container:

Horizontal Gutters

Alternative solution with overflow wrapper:

Horizontal Gutters

Vertical Gutters

Use .gy-* for vertical spacing. Add wrapper when overflow occurs:

Vertical Gutters

Combined Gutters

Use .g-* for both axes. Smaller gutters don't need overflow control:

Combined Gutters

Row Columns with Gutters

Combine responsive row columns with gutters:

Row Columns with Gutters

No Gutters

Remove all spacing with .g-0:

No Gutters

Quick Reference

Class	Styles
.g-0	--ms-gutter-x: 0; --ms-gutter-y: 0;
.g-1	--ms-gutter-x: 0.25rem; --ms-gutter-y: 0.25rem;
.g-2	--ms-gutter-x: 0.5rem; --ms-gutter-y: 0.5rem;
.g-3	--ms-gutter-x: 0.75rem; --ms-gutter-y: 0.75rem;
.g-4	--ms-gutter-x: 1rem; --ms-gutter-y: 1rem;
.g-5	--ms-gutter-x: 1.25rem; --ms-gutter-y: 1.25rem;
.gx-0	--ms-gutter-x: 0;
.gx-1	--ms-gutter-x: 0.25rem;
.gx-2	--ms-gutter-x: 0.5rem;
.gx-3	--ms-gutter-x: 0.75rem;
.gx-4	--ms-gutter-x: 1rem;
.gx-5	--ms-gutter-x: 1.25rem;
.gy-0	--ms-gutter-y: 0;
.gy-1	--ms-gutter-y: .25rem;
.gy-2	--ms-gutter-y: .5rem;
.gy-3	--ms-gutter-y: 0.75rem;
.gy-4	--ms-gutter-y: 1rem;
.gy-5	--ms-gutter-y: 1.25rem;

All classes support responsive prefixes like sm:, md:, lg:, xl: etc.