In the first part of our three-part series on Mastering Vuetify Grids, we covered the basics of creating Grids in Vuetify. As we move into Part 2, we're going to take a deep dive into different ways we can style our grid. If you're just joining us, start with Part 1 to get up to speed.
For this tutorial, we'll be looking through a variety of code samples and how they would look on your webpage. This will give you the building blocks for more complex applications and lay a stronger foundation to help you understand Vuetify Grids.
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!
Your First Grid Column
We are going to make a big block that stretches across the screen, so you're content grabs the attention it deserves
<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
Now we need to pair two elements in harmony by placing two blocks next to each other. Remember, if you want your blocks to be on the same row the total value of cols in this row should be equal to 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
Want to stack blocks on top of each other? If you want it to have two rows on top of each other, just 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 are two properties used to control the spacing between elements. Imagine your content is a picture in a picture frame.
- Margins are like the space around a picture frame.
- Padding is like the space between the picture and the frame.
There are a variety of ways to declare margins and padding for a Vuetify Element, one of the shortcuts is using classes like mx, mt, and pb. These classes use the format {property}{direction}-{size} where property is m for margin and p for padding, direction can be top, bottom, left, right and size can be a value from 0-16. To learn more about these classes read more on Vuetify's Spacing Documentation . Here's a code sample on how it's used :
<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>
Change Your Column Size to Take Less Space
Not every element needs to stretch to the end of the row width. If we want the row to take less space, change the value of cols
<v-container> <v-row> <v-col cols="8"> <v-card color="blue"> My Row </v-card> </v-col> </v-row> </v-container>
Make Columns Tall by Changing Height
You may be wondering why the previous examples were so thin, but if you want on change the way the row looks to fit the content, just change the 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>
Tall and Short Neighbors: Mixing Up Column Heights
If you have two rows but you want them to look different , you can just change the height or the value for cols. As long as all the cols in the v-row add up to 12, they'll remain 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>
The Big Block: Making a Row Stand Out
Just like a headline in a newspaper, sometimes we want our content to be the main focus. Let's make one row look really important :
<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 </v-card> </v-col> </v-row> </v-container>
Make Column Responsive Based on Screen Size
In a world with myriad devices, responsiveness is non-negotiable. Let's wrap up by ensuring your layout adapts beautifully across all screen sizes.
When defining our v-col, we'll have to include something similar to the following : <v-col cols="12" sm="6" md="4" lg="3">, the values sm, md, and lg define the number of columns the <v-col> element will occupy for different screen sizes. Here's what each part means :
sm="6": this defines the column size as 6 for small screens like tablets or larger mobile phones. It's equivalent to having the tag<v-col cols="6">when you have a small screen.md="4": this defines the column size as 4 on medium-sized screens like small laptopslg="3": this defines the column size as 3 on large-sized screens like big laptopscols="12": This is added as a default for any screen sizes that aren't defined e.g. if I had<v-col cols="12" sm="6">, for all screens other than the smaller screens, the col size will be 12.
By specifying different values for the cols attribute at different breakpoints, you can create a responsive layout that adjusts based on the user's screen size.
As we wrap up Part 2 you have some fancier styles in your tool belt and a higher understanding of Vuetify Grid Styles. Stay tuned for Part 3, where we'll get to create even fancier styles using Nesting. If you missed Part 1, catch up here to learn the basics of the Vuetify grid system.