CSS Grid

Wide

Span 4

Span 4

Span 4

Span 4

Narrow

Span 4

Span 4

Span 4

Span 4

Condensed

Span 4

Span 4

Span 4

Span 4

Subgrid

Wide base

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

Narrow base

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

Condensed base

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

Mix-and-match

I

I

I

I

I

I

I

I

I

I

I

I

Responsive

Small: Span 2 of 4

Medium: Span 4 of 8

Large: Span 6 of 16

Small: Span 2 of 4

Medium: Span 2 of 8

Large: Span 3 of 16

Small: Span 0 of 4

Medium: Span 2 of 8

Large: Span 3 of 16

Small: Span 0 of 4

Medium: Span 0 of 8

Large: Span 4 of 16

Offset

Start 6

Start 5

Start 4

Start 3

Start 2

Start 1

column start 2, span 2

span 2, column end 5

column start 2, column end 5

Auto Columns

Span 100%

Span 75%

Span 50%

Span 25%

100% at sm, 75% at md, 50% at lg, 25% at xlg

Full Width

Span 4

Span 4

Span 4

Span 4

RTL layout

Wide

Span 4

Span 4

Span 4

Span 4

Narrow

Span 4

Span 4

Span 4

Span 4

Condensed

Span 4

Span 4

Span 4

Span 4

Subgrid

Wide base

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

Narrow base

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

Condensed base

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

Mix-and-match

I

I

I

I

I

I

I

I

I

I

I

I

Responsive

Small: Span 2 of 4

Medium: Span 4 of 8

Large: Span 6 of 16

Small: Span 2 of 4

Medium: Span 2 of 8

Large: Span 3 of 16

Small: Span 0 of 4

Medium: Span 2 of 8

Large: Span 3 of 16

Small: Span 0 of 4

Medium: Span 0 of 8

Large: Span 4 of 16

Offset

Start 6

Start 5

Start 4

Start 3

Start 2

Start 1

column start 2, span 2

span 2, column end 5

column start 2, column end 5

Auto Columns

Span 100%

Span 75%

Span 50%

Span 25%

100% at sm, 75% at md, 50% at lg, 25% at xlg

Full Width

Span 4

Span 4

Span 4

Span 4