Grid system

The Vuetify grid is heavily inspired by the Bootstrap grid. It is integrated by using a series of containers, rows, and columns to layout and align content.

Align grid system

One of three columns

Breakpoint sizing grid system

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

Justify grid system

One of two columns

No gutters grid system

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

Offset grid system

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

Offset breakpoint grid system

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

Order grid system

First, but unordered

Second, but last

Third, but first

Order first and last grid system

First, but last

Second, but unordered

Third, but first

Column wrapping grid system

.col-9

.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-6
Subsequent columns continue along the new line.

Equal width columns grid system

Column

Grow and Shrink grid system

col

col-8

col-4

Margin helpers grid system

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

Nested grid grid system

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 3: .col-4 .col-sm-6

One column width grid system

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

Row and column breakpoints grid system

col-6

col

Spacers grid system

.col

.col-auto

.col

.col-md-5

Unique layouts grid system

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

Variable content width grid system

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

Fluid grid system

Column