Vuetify grids are the foundation of responsive layouts in Vue.js applications. This comprehensive guide will take you from basic styling techniques to advanced nesting strategies, ensuring your web applications deliver a consistent, user-friendly experience across all devices.
01. SETUP
Follow along the different code examples given in the tutorial by running the command yarn create vuetify and under the src > components > HelloWorld.vue, delete everything within the <template></template> tags and replace the items between with the examples we discuss. You can view the expected result as well in this tutorial, to make sure everything looks right.
Now we're ready to code!
02. BASIC GRID STYLING
Your First Grid Column
Let's start with a big block that stretches across the screen:
<v-container>
<v-row>
<v-col cols="12">
<v-card color="blue">
My Row
</v-card>
</v-col>
</v-row>
</v-container>Creating Two Columns Side by Side
To place two blocks next to each other, remember that the total value of cols in a row should equal 12:
<v-container>
<v-row>
<v-col cols="6">
<v-card color="blue">
My Row 1
</v-card>
</v-col>
<v-col cols="6">
<v-card color="blue">
My Row 2
</v-card>
</v-col>
</v-row>
</v-container>Stacking Columns on Top of Each Other
To stack blocks vertically, make the total values of cols in your <v-row> greater than 12:
<v-container>
<v-row>
<v-col cols="12">
<v-card color="blue">
My Row 1
</v-card>
</v-col>
<v-col cols="12">
<v-card color="blue">
My Row 2
</v-card>
</v-col>
</v-row>
</v-container>Adjusting Spacing with Margins and Padding
Margins and Padding control spacing between elements:
- Margins are like the space around a picture frame
- Padding is like the space between the picture and the frame
Use classes like mx, mt, and pb with the format {property}{direction}-{size}:
<v-container>
<v-row>
<v-col cols="12" class="mt-10 pl-5">
<v-card color="blue">
My Row
</v-card>
</v-col>
</v-row>
</v-container>Column Size Variations
Not every element needs to stretch to the full row width:
<v-container>
<v-row>
<v-col cols="8">
<v-card color="blue">
My Row
</v-card>
</v-col>
</v-row>
</v-container>Making Columns Tall by Changing Height
Control the visual impact by adjusting height:
<v-container>
<v-row>
<v-col cols="12">
<v-card color="blue" height="600px">
My Row
</v-card>
</v-col>
</v-row>
</v-container>Mixing Column Heights
Create visual interest with different heights while keeping elements on the same row:
<v-container>
<v-row>
<v-col cols="6">
<v-card color="blue" height="600px">
My Row 1
</v-card>
</v-col>
<v-col cols="6">
<v-card color="blue" height="350px">
My Row 2
</v-card>
</v-col>
</v-row>
</v-container>Creating Emphasis with Asymmetrical Layouts
Make content stand out with unequal column widths:
<v-container>
<v-row>
<v-col cols="7">
<v-card color="blue" height="600px">
My Row 1
</v-card>
</v-col>
<v-col cols="5">
<v-card color="blue" height="350px">
My Row 2
</v-card>
</v-col>
</v-row>
</v-container>03. RESPONSIVE DESIGN
Making Columns Responsive Based on Screen Size
In our multi-device world, responsiveness is essential. Define different column sizes for different screen sizes:
<v-col cols="12" sm="6" md="4" lg="3">Where:
sm="6": Column size 6 for small screens (tablets, large mobile phones)md="4": Column size 4 for medium screens (small laptops)lg="3": Column size 3 for large screens (big laptops)cols="12": Default for undefined screen sizes
04. ADVANCED NESTING TECHNIQUES
Understanding Grid Nesting
Every v-col you create can essentially become another mini grid. This 'grid within a grid' approach allows for complex and flexible layouts, as each column can contain its own set of rows and columns.
Creating a Dashboard Layout
Let's build a dashboard-style skeleton loader to demonstrate nesting:
Step 1: Two Main Rows
<v-container>
<v-row>
<v-col cols="12">
<!-- Top section -->
</v-col>
<v-col cols="12">
<!-- Bottom section -->
</v-col>
</v-row>
</v-container>Step 2: Dividing the Top Section
Within the top v-col, add another v-row and divide it into two columns:
<v-container>
<v-row>
<v-col cols="12">
<v-row>
<v-col cols="6">
<!-- Left section -->
</v-col>
<v-col cols="6">
<!-- Right section -->
</v-col>
</v-row>
</v-col>
<v-col cols="12">
<!-- Bottom section -->
</v-col>
</v-row>
</v-container>Step 3: Further Nesting
Add another v-row within the first v-col to create two smaller sections:
<v-container>
<v-row>
<v-col cols="12">
<v-row>
<v-col cols="6">
<v-row>
<v-col cols="12">
<!-- Top-left section -->
</v-col>
<v-col cols="12">
<!-- Bottom-left section -->
</v-col>
</v-row>
</v-col>
<v-col cols="6">
<!-- Right section -->
</v-col>
</v-row>
</v-col>
<v-col cols="12">
<!-- Bottom section -->
</v-col>
</v-row>
</v-container>Complete Dashboard Example
Here's the final nested grid with actual content:
<v-container>
<v-row>
<v-col cols="12">
<v-row>
<v-col cols="6">
<v-row>
<v-col cols="12">
<v-skeleton-loader
type="card, actions"
height="280px"
class="mx-auto border"
color="pink-lighten-3">
</v-skeleton-loader>
</v-col>
<v-col cols="12">
<v-skeleton-loader
type="card"
height="220px"
class="mx-auto border"
color="pink-lighten-3">
</v-skeleton-loader>
</v-col>
</v-row>
</v-col>
<v-col cols="6">
<v-skeleton-loader
type="table"
height="520px"
class="mx-auto border"
color="pink-lighten-3">
</v-skeleton-loader>
</v-col>
</v-row>
</v-col>
<v-col cols="12">
<v-skeleton-loader
type="sentences, paragraph"
height="200px"
class="mx-auto border"
color="pink-lighten-3">
</v-skeleton-loader>
</v-col>
</v-row>
</v-container>05. BEST PRACTICES
Keep the 12-column system in mind: Always ensure your columns add up to 12 for proper row alignment
Use responsive breakpoints: Define different column sizes for different screen sizes
Leverage nesting strategically: Use nested grids to create complex layouts while maintaining code organization
Consider spacing: Use margin and padding classes to create visual hierarchy
Test across devices: Always verify your layouts work on different screen sizes
06. CONCLUSION
Mastering Vuetify grids involves understanding both basic styling techniques and advanced nesting strategies. With these tools, you can create sophisticated, responsive layouts that adapt beautifully to any device. The combination of proper column sizing, responsive breakpoints, and strategic nesting will elevate your Vue.js applications to professional standards.
Remember to experiment with different combinations and always test your layouts across various screen sizes to ensure the best user experience.
