Skip to main content

​
Grid System

Vuetify’s grid system is built using flexbox and consists of three main components: VContainer, VRow, and VCol. It uses a 12-point grid system that scales to any screen size.

​
Components

  • VContainer - Provides a centered, responsive container for your content
  • VRow - Creates a horizontal row of columns
  • VCol - Individual column within a row

​
Usage

<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="6">
        Column 1
      </v-col>
      <v-col cols="12" md="6">
        Column 2
      </v-col>
    </v-row>
  </v-container>
</template>

​
VContainer

The VContainer component provides a centered, responsive container for your content.

​
Props

​
fluid
boolean
default:"false"
Removes viewport maximum-width size breakpoints, making the container full-width.
<v-container fluid>
  <!-- Full-width container -->
</v-container>
​
tag
string
default:"'div'"
Specifies the custom tag to use for the root element.
​
maxWidth
string | number
Sets the maximum width of the container.
<v-container max-width="1200">
  <!-- Content -->
</v-container>
​
minWidth
string | number
Sets the minimum width of the container.
​
width
string | number
Sets the width of the container.
​
height
string | number
Sets the height of the container.

​
Example

<template>
  <!-- Responsive container -->
  <v-container>
    <v-row>
      <v-col>
        Content
      </v-col>
    </v-row>
  </v-container>

  <!-- Fluid container -->
  <v-container fluid>
    <v-row>
      <v-col>
        Full-width content
      </v-col>
    </v-row>
  </v-container>
</template>

​
VRow

The VRow component creates a horizontal flexbox row for columns.

​
Props

​
align
'start' | 'end' | 'center' | 'baseline' | 'stretch'
Aligns items along the cross axis.
<v-row align="center">
  <!-- Vertically centered columns -->
</v-row>
This prop is deprecated. Use align-* classes instead for better performance.
​
justify
'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
Aligns items along the main axis.
<v-row justify="center">
  <!-- Horizontally centered columns -->
</v-row>
This prop is deprecated. Use justify-* classes instead for better performance.
​
alignContent
'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch'
Aligns content when there are multiple rows.
This prop is deprecated. Use align-content-* classes instead.
​
density
'default' | 'comfortable' | 'compact'
default:"'default'"
Adjusts the spacing between columns.
<!-- No gutters -->
<v-row density="compact">
  <!-- Columns -->
</v-row>

<!-- Reduced gutters -->
<v-row density="comfortable">
  <!-- Columns -->
</v-row>
​
noGutters
boolean
default:"false"
Removes the gutter spacing between columns.
<v-row no-gutters>
  <!-- Columns with no spacing -->
</v-row>
This prop is deprecated. Use density="compact" instead.
​
gap
number | string | array
Sets custom gap spacing between columns. Can be a single value or array of [horizontal, vertical].
<!-- Same gap for horizontal and vertical -->
<v-row :gap="16">
  <!-- Columns -->
</v-row>

<!-- Different horizontal and vertical gaps -->
<v-row :gap="[16, 8]">
  <!-- Columns -->
</v-row>
​
size
number | string
Sets the number of columns in the row (overrides default 12).
<v-row :size="24">
  <!-- 24-column grid -->
</v-row>
​
tag
string
default:"'div'"
Specifies the custom tag to use for the root element.

​
Responsive Alignment Props

All alignment props support responsive breakpoint variants:
  • align-sm, align-md, align-lg, align-xl, align-xxl
  • justify-sm, justify-md, justify-lg, justify-xl, justify-xxl
  • align-content-sm, align-content-md, align-content-lg, align-content-xl, align-content-xxl
These props are deprecated. Use responsive classes instead.

​
Example

<template>
  <v-row justify="center" align="center">
    <v-col cols="12" md="6">
      Centered column
    </v-col>
  </v-row>

  <v-row :gap="[16, 8]">
    <v-col>Column with custom gap</v-col>
    <v-col>Column with custom gap</v-col>
  </v-row>
</template>

​
VCol

The VCol component creates individual columns within a row.

​
Props

​
cols
boolean | string | number
default:"false"
Sets the default number of columns the component extends. Available: 1-12 or ‘auto’.
<v-col cols="12">
  <!-- Full width -->
</v-col>

<v-col cols="6">
  <!-- Half width -->
</v-col>

<v-col cols="auto">
  <!-- Auto width based on content -->
</v-col>
​
offset
string | number
Sets the number of columns to offset the component.
<v-col cols="6" offset="3">
  <!-- 6 columns wide, offset by 3 -->
</v-col>
​
order
string | number
Sets the order of the column.
<v-col order="2">
  <!-- Appears second -->
</v-col>
<v-col order="1">
  <!-- Appears first -->
</v-col>
This prop is deprecated. Use order-* classes instead.
​
alignSelf
'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch'
Sets the align-self property for the column.
<v-col align-self="center">
  <!-- Vertically centered -->
</v-col>
This prop is deprecated. Use align-self-* classes instead.
​
tag
string
default:"'div'"
Specifies the custom tag to use for the root element.

​
Responsive Breakpoint Props

All column props support responsive breakpoint variants: Breakpoint columns:
  • sm, md, lg, xl, xxl
Breakpoint offsets:
  • offset-sm, offset-md, offset-lg, offset-xl, offset-xxl
Breakpoint order:
  • order-sm, order-md, order-lg, order-xl, order-xxl
Breakpoint alignment:
  • align-self-sm, align-self-md, align-self-lg, align-self-xl, align-self-xxl
<v-col 
  cols="12" 
  sm="6" 
  md="4" 
  lg="3"
>
  <!-- Responsive column -->
</v-col>

​
Fractional Columns

You can use fractional values for custom column divisions: 
<v-col cols="6/10">
  <!-- 6 columns out of 10 total -->
</v-col>

​
Example

<template>
  <v-row>
    <v-col cols="12" sm="6" md="4">
      Responsive column
    </v-col>
    <v-col cols="12" sm="6" md="4">
      Responsive column
    </v-col>
    <v-col cols="12" md="4">
      Responsive column
    </v-col>
  </v-row>

  <v-row>
    <v-col cols="6" offset="3">
      Offset column
    </v-col>
  </v-row>
</template>

​
Examples

​
Basic Grid

<template>
  <v-container>
    <v-row>
      <v-col
        v-for="n in 12"
        :key="n"
        cols="1"
      >
        <v-sheet class="pa-2 ma-2">{{ n }}</v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>

​
Responsive Layout

<template>
  <v-container>
    <v-row>
      <v-col
        cols="12"
        sm="6"
        md="4"
        lg="3"
      >
        <v-card>
          <v-card-title>Card 1</v-card-title>
        </v-card>
      </v-col>
      <v-col
        cols="12"
        sm="6"
        md="4"
        lg="3"
      >
        <v-card>
          <v-card-title>Card 2</v-card-title>
        </v-card>
      </v-col>
      <v-col
        cols="12"
        sm="6"
        md="4"
        lg="3"
      >
        <v-card>
          <v-card-title>Card 3</v-card-title>
        </v-card>
      </v-col>
      <v-col
        cols="12"
        sm="6"
        md="4"
        lg="3"
      >
        <v-card>
          <v-card-title>Card 4</v-card-title>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

​
Offset

<template>
  <v-container>
    <v-row>
      <v-col cols="4">
        <v-sheet class="pa-2">4 columns</v-sheet>
      </v-col>
      <v-col cols="4" offset="4">
        <v-sheet class="pa-2">4 columns, offset 4</v-sheet>
      </v-col>
    </v-row>
    
    <v-row>
      <v-col cols="3" offset="3">
        <v-sheet class="pa-2">3 columns, offset 3</v-sheet>
      </v-col>
      <v-col cols="3" offset="3">
        <v-sheet class="pa-2">3 columns, offset 3</v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>

​
Alignment

<template>
  <v-container>
    <!-- Vertical alignment -->
    <v-row align="center" style="height: 200px;">
      <v-col>
        <v-sheet class="pa-2">Centered</v-sheet>
      </v-col>
    </v-row>

    <!-- Horizontal alignment -->
    <v-row justify="center">
      <v-col cols="4">
        <v-sheet class="pa-2">Centered</v-sheet>
      </v-col>
    </v-row>

    <!-- Space between -->
    <v-row justify="space-between">
      <v-col cols="4">
        <v-sheet class="pa-2">Left</v-sheet>
      </v-col>
      <v-col cols="4">
        <v-sheet class="pa-2">Right</v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>

​
Custom Gaps

<template>
  <v-container>
    <!-- Custom horizontal and vertical gap -->
    <v-row :gap="[24, 16]">
      <v-col cols="4">
        <v-sheet class="pa-2">Column</v-sheet>
      </v-col>
      <v-col cols="4">
        <v-sheet class="pa-2">Column</v-sheet>
      </v-col>
      <v-col cols="4">
        <v-sheet class="pa-2">Column</v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>

​
Breakpoints

Vuetify uses the following breakpoints:
  • xs: < 600px (extra small)
  • sm: 600px - 959px (small)
  • md: 960px - 1279px (medium)
  • lg: 1280px - 1919px (large)
  • xl: 1920px - 2559px (extra large)
  • xxl: ≥ 2560px (extra extra large)

​
Best Practices

  • Always wrap VRow components in a VContainer
  • Use responsive breakpoint props for mobile-first design
  • Prefer utility classes over deprecated props for alignment
  • Use fluid prop on VContainer for full-width layouts
  • Use density="compact" instead of deprecated no-gutters

Build docs developers (and LLMs) love

Get started for freeTalk to us