Usage
The grid components are used to make flexbox layouts. The elements, features and general idea is inspired by and very similar to Bootstrap grids.
There are three grid components: v-container, v-row and v-col. Those components are just simple, single divs and have all the basic, required classes like flex, flex-row etc. Content is placed within v-col and only v-col may be immediate children of v-row.
Tailwind classes are then added to v-container, v-row and v-col to define widths, column alignment, gutters and many other properties of the grid. Most layouts should start with the basis-* or grow classes to set initial widths of the columns and then add additional features. Prepend these classes with responsive modifiers to make grids that change depending on the screen size.
Example - simple
Basic 12 columns layout with percentage widths similar to Bootstrap.
<template>
<v-container>
<v-row>
<v-col class="basis-3/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-3/12">
<div class="column-content">col 2</div>
</v-col>
<v-col class="basis-6/12">
<div class="column-content">col 3</div>
</v-col>
</v-row>
</v-container>
</template>
Example - column wrapping
By default columns that overflow row are wrapped to the next line.
<template>
<v-container>
<v-row>
<v-col class="basis-3/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-3/12">
<div class="column-content">col 2</div>
</v-col>
<v-col class="basis-6/12">
<div class="column-content">col 3</div>
</v-col>
<v-col class="basis-6/12">
<div class="column-content">col 4</div>
</v-col>
<v-col class="basis-6/12">
<div class="column-content">col 5</div>
</v-col>
</v-row>
</v-container>
</template>
To disable default column wrapping add flex-nowrap class to the v-row.
<template>
<v-container>
<v-row class="flex-nowrap overflow-x-scroll">
<v-col class="basis-3/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-3/12">
<div class="column-content">col 2</div>
</v-col>
<v-col class="basis-6/12">
<div class="column-content">col 3</div>
</v-col>
<v-col class="basis-6/12">
<div class="column-content">col 3</div>
</v-col>
</v-row>
</v-container>
</template>
Example - auto width columns
Adding grow class to v-cols will generate columns that fit available space in the row.
<template>
<v-container>
<v-row>
<v-col class="grow">
<div class="column-content">col 1 (auto)</div>
</v-col>
<v-col class="grow">
<div class="column-content">col 2 (auto)</div>
</v-col>
<v-col class="grow">
<div class="column-content">col 3 (auto)</div>
</v-col>
</v-row>
</v-container>
</template>
To wrap auto width columns to a new line use v-col-break component.
<template>
<v-container>
<v-row>
<v-col class="grow">
<div class="column-content">col 1 (auto)</div>
</v-col>
<v-col class="grow">
<div class="column-content">col 2 (auto)</div>
</v-col>
<v-col-break />
<v-col class="grow">
<div class="column-content">col 3 (auto)</div>
</v-col>
<v-col class="grow">
<div class="column-content">col 4 (auto)</div>
</v-col>
</v-row>
</v-container>
</template>
Auto width columns can be used with columns that have explicit width. Auto width columns will automaticaly resize to fit into available space.
<template>
<v-container>
<v-row>
<v-col class="grow">
<div class="column-content">col 1 (auto)</div>
</v-col>
<v-col class="basis-6/12">
<div class="column-content">col 2</div>
</v-col>
<v-col class="grow">
<div class="column-content">col 3 (auto)</div>
</v-col>
</v-row>
<v-row>
<v-col class="grow">
<div class="column-content">col 1 (auto)</div>
</v-col>
<v-col class="basis-3/12">
<div class="column-content">col 2</div>
</v-col>
<v-col class="basis-3/12">
<div class="column-content">col 3</div>
</v-col>
</v-row>
</v-container>
</template>
Example - variable width columns
Use basis-auto class to make columns that have size based on the natural width of their content.
<template>
<v-container>
<v-row>
<v-col class="basis-4/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-auto">
<div class="column-content">col 2 (variable)</div>
</v-col>
<v-col class="basis-4/12">
<div class="column-content">col 3</div>
</v-col>
</v-row>
</v-container>
</template>
Example - responsive column width
To create responsive grid simply add responsive modifiers (md:, lg: etc) to basis-* or grow classes.
<template>
<v-container>
<v-row>
<v-col class="basis-full md:basis-3/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-full md:basis-3/12">
<div class="column-content">col 2</div>
</v-col>
<v-col class="basis-full md:basis-6/12">
<div class="column-content">col 3</div>
</v-col>
</v-row>
</v-container>
</template>
Example - columns break
To break columns to a new line use the v-col-break component.
<template>
<v-container>
<v-row>
<v-col class="basis-3/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-3/12">
<div class="column-content">col 2</div>
</v-col>
<v-col-break />
<v-col class="basis-6/12">
<div class="column-content">col 3</div>
</v-col>
</v-row>
</v-container>
</template>
To break columns only at certain breakpoints use hidden and block classes with the responsive modifiers. In the example below columns only break at small screens.
<template>
<v-container>
<v-row>
<v-col class="basis-3/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-3/12">
<div class="column-content">col 2</div>
</v-col>
<v-col-break class="block md:hidden" />
<v-col class="basis-6/12">
<div class="column-content">col 3</div>
</v-col>
</v-row>
</v-container>
</template>
Example - row horizontal alignment
To align columns along horizontal axis use justify-* classes in the row.
<template>
<v-container class="gap-y-4">
<v-row class="justify-center">
<v-col class="basis-4/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-4/12">
<div class="column-content">col 2</div>
</v-col>
</v-row>
<v-row class="justify-start">
<v-col class="basis-4/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-4/12">
<div class="column-content">col 2</div>
</v-col>
</v-row>
<v-row class="justify-end">
<v-col class="basis-4/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-4/12">
<div class="column-content">col 2</div>
</v-col>
</v-row>
<v-row class="justify-around">
<v-col class="basis-4/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-4/12">
<div class="column-content">col 2</div>
</v-col>
</v-row>
<v-row class="justify-between">
<v-col class="basis-4/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-4/12">
<div class="column-content">col 2</div>
</v-col>
</v-row>
</v-container>
</template>
Example - row vertical alignment
To align columns along vertical axis use items-* classes in the row. You can also align columns seperately with self-* classes.
<template>
<v-container>
<v-row class="h-[120px] items-start">
<v-col class="basis-4/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-4/12">
<div class="column-content">col 2</div>
</v-col>
</v-row>
</v-container>
<v-divider />
<v-container>
<v-row class="h-[120px] items-center">
<v-col class="basis-4/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-4/12">
<div class="column-content">col 2</div>
</v-col>
</v-row>
</v-container>
<v-divider />
<v-container>
<v-row class="h-[120px] items-end">
<v-col class="basis-4/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-4/12">
<div class="column-content">col 2</div>
</v-col>
</v-row>
</v-container>
</template>
Example - gutters
By default columns are not separated by gutter. You can add it using padding classes and then offset it with equal negative margin classes in the row. In the example below [&>*]: modifier is used to add equal padding to entire row but you can also set it seperately for each column. For more info on custom modifiers see tailwind documentation
Note that space-* , gap-* and divide-* classes will not work reliably and will result in overflow or break column wrapping. However, those classes can be used on v-container to create horizontal gutters that separate v-rows.
<template>
<v-container>
<v-row class="-m-2 [&>*]:p-2">
<v-col class="basis-3/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-3/12">
<div class="column-content">col 2</div>
</v-col>
<v-col class="basis-6/12">
<div class="column-content">col 3</div>
</v-col>
<v-col class="basis-6/12">
<div class="column-content">col 4</div>
</v-col>
<v-col class="basis-6/12">
<div class="column-content">col 5</div>
</v-col>
</v-row>
</v-container>
</template>
Gutters can also be made responsive. In the following example gutters get narrower on lower resolutions and are disabled on small screens.
<template>
<v-container>
<v-row class="-m-0 md:-m-2 lg:-m-4 [&>*]:p-0 md:[&>*]:p-2 lg:[&>*]:p-4">
<v-col class="basis-3/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-3/12">
<div class="column-content">col 2</div>
</v-col>
<v-col class="basis-6/12">
<div class="column-content">col 3</div>
</v-col>
<v-col class="basis-6/12">
<div class="column-content">col 4</div>
</v-col>
<v-col class="basis-6/12">
<div class="column-content">col 5</div>
</v-col>
</v-row>
</v-container>
</template>
Example - columns position with margin classes
You can shift or center columns with ml-auto , mr-auto or mx-auto margin utility classes.
<template>
<v-container class="gap-y-4">
<v-row>
<v-col class="basis-3/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-3/12 ml-auto">
<div class="column-content">col 2 .ml-auto</div>
</v-col>
</v-row>
<v-row>
<v-col class="basis-3/12 ml-auto">
<div class="column-content">col 1 .ml-auto</div>
</v-col>
<v-col class="basis-5/12">
<div class="column-content">col 2</div>
</v-col>
</v-row>
<v-row>
<v-col class="basis-4/12 mx-auto">
<div class="column-content">col 1 .mx-auto</div>
</v-col>
<v-col class="basis-4/12">
<div class="column-content">col 2</div>
</v-col>
</v-row>
</v-container>
</template>
Example - nested layouts
Grids can also be nested by placing v-rows inside v-cols .
<template>
<v-container>
<v-row class="-m-2 [&>*]:p-2">
<v-col class="basis-3/12">
<div class="column-content">col 1</div>
</v-col>
<v-col class="basis-3/12">
<v-row>
<v-col class="basis-6/12">
<div class="nested-column-content">col 1</div>
</v-col>
<v-col class="basis-6/12">
<div class="nested-column-content">col 2</div>
</v-col>
<v-col class="basis-6/12">
<div class="nested-column-content">col 3</div>
</v-col>
<v-col class="basis-6/12">
<div class="nested-column-content">col 4</div>
</v-col>
</v-row>
</v-col>
<v-col class="basis-6/12">
<div class="column-content">col 3</div>
</v-col>
</v-row>
</v-container>
</template>
Example - column order
order-* classes can be used to change order of columns.
<template>
<v-container>
<v-row>
<v-col class="basis-3/12 order-2">
<div class="column-content ">col 1</div>
</v-col>
<v-col class="basis-3/12 order-last">
<div class="column-content">col 2</div>
</v-col>
<v-col class="basis-6/12">
<div class="column-content">col 3</div>
</v-col>
</v-row>
</v-container>
</template>
Example - 3 column documentation layout
The example of 3 column grid layout that is used in this documentation page.
<template>
<v-fluid-container>
<v-row class="justify-center">
<v-col class="hidden basis-auto lg:block xl:px-6">
<div class="column-content">sidebar nav</div>
</v-col>
<v-col class="max-w-screen-lg grow px-4 lg:px-6 xl:px-28">
<div class="column-content">main text</div>
</v-col>
<v-col class="hidden basis-2/12 xl:block">
<div class="column-content">content nav</div>
</v-col>
</v-row>
</v-fluid-container>
</template>