Introduction to the Vuetify Grid
Or rather than ganks so time to unleash the beast that is the grid system. So Vuetify uses Flexbox under the hood to create this twelve column grid forest in which we can lay out our content. Now, Flexbox is purely a vanilla CSS mechanism which allows us to create these grid-like layouts very, very easily. Vuetify just abstracts a little away from the CSS and it adds in all of this functionality into its grid components. Now if you want to learn more about the CSS Flexbox mechanics under the hood I'd suggest you watch my CSS Flexbox series on this channel; I'll leave the link down below.
Twelve-Column Grid Explained
So anyway with this Vuetify Flexbox grid we can easily make different layouts and they're responsive as well. So you can see down here we have a demo of this. Now I said that this was a 12 column layout or a 12 column grid, but what does that mean exactly? Well it means that our horizontal space from left to right is split up into 12 equal columns of width. Now imagine we have 12 different elements that we want to spread across on the page. Now if we wanted them all to be on one row then we'd assign each element one column of width like this, and if you counted these there'd be 12 so they'd all be spaced equally on the page. Now we could want them to have a bit more width; each one of these elements we could say well, okay, give each element a width of two columns and they'd look like this. There's six here so we need another row to get the other six on. Okay, same goes for this: we could say okay, well make them a bit bigger, three columns in width or four columns in width or six or twelve which is the whole width. Now we use this grid system and these different columns to layout our content in the page. It's not always going to look like this, so for example say I have an image on the left and some text on the right. Now I might want the image to take up four columns in width on the left but the text on the right I might want to take up eight columns of width, and that's fine because eight plus four is twelve and that takes up all the space available to us.
Responsiveness Demonstration
All right, so if we watch this you'll notice that this is also responsive. It just kind of goes down into these different sizes. But if we scroll down here we're going to see some different versions of this grid. Like this, if we make this a little bigger you can see that we have two at the top then three then four. Now what I'm going to do is make this a little smaller. Now let me just scoot this out like so and now it's gone on to four different rows. If I can find it there it is. So now we have two, three, and two and two. Before it was two, three, and four at the bottom. So it's rearranged this based on the screen size. It's come back to four again. Okay, so it's very flexible and we're going to be using the grid throughout this series to layout the content on our pages. So that's a little bit about it.
Creating a Grid with VContainer, VLayout, and VFlex
Let's start by creating a bit of a grid on one of our pages. So then how do we make this grid exactly? Well first of all let's go to one of our pages. I'm going to go to the dashboard and we'll do our grid in here. Now we've already created this VContainer and we said that our grid would live inside this container so that's the first thing to do. I'll delete that little bit of content. The next thing we need to do is create a layout and a layout basically represents a row of content, so we use a component VLayout to do this. Now that we want to specify that this is going to be a row of content we can also use column and that would use Flexbox vertically for us, but for the most part we're going to be using row. Okay, we might look at column later on. So you can think of this as a row of elements we're making a row on the grid. Now then inside here we need to use elements or components called VFlex and they are the elements which are going to be placed into these different positions on that row on the grid. So for example let's say VFlex, so you can see this as a container element for a certain element on this row. If we go back to the docs over here this would be a VFlex element, this would be a VFlex element; they all would be. So they represent these different positions. Right, okay. Then so now these VFlex elements they can have different props which tell it how to space out the content on the screen. Remember we talked about breakpoints: we have these different breakpoints: extra small, small, medium, large, extra large. Now what we can do is say okay, extra small screens I want you to take up six columns of width or twelve columns of width or whatever you want and we always start with the mobile. It's always a good idea to do that so you go with a mobile-first approach and it looks good on a mobile and then you're extending it to larger screens. So I'm gonna say here xs which is the code for extra small screens and this isn't a class this is just a prop and I'm gonna say that at this size screen I want this flex item, this VFlex component, to take up twelve columns in width. So we say xs and then twelve. Okay now then when it gets to a medium size screen I want this to be six columns of width instead because we don't need it to be full width on a medium sized screen; we have more room so we can be happy with just half of the width which is six columns. So I can say md and then six. So extra small screens and small screens it's going to be twelve; when it reaches medium it's going to be six columns of width. Okay. So for example let's do a button inside here. We'll say VBtn and we'll give this a prop of outline and what that does is make an outline around the button and we'll say block because we want to give this a display type of block. These are just other props that we can use on a button. Then I'm going to give this a class of primary just to color it that purple color. Now then inside here I'm going to say one so that if we look at this in a browser then go to the dashboard you're gonna see this right here. So let me close that and this right here is six columns of width and it's taking up half of the horizontal space available to us.
Multiple VFlex Items and Wrapping Behavior
All right, so let's do the same thing for another button. I'm gonna do this again down here, change this to two and then save it. Now we can see we have one and two each six columns in width. Now when we get to extra small screen sizes it's going to be twelve columns in width or rather when we get to small screen sizes because for extra small it's twelve and it's twelve until it reaches medium. So let's make this a bit smaller and see if this works when we get to small screen sizes. And it's not working right so why is that? And that is because we've not said that we want our elements to wrap on to the next row when there's not enough room and we have to explicitly do that. And we do that by typing in a wrap prop in the layout. So let's save that and see this again and now we can see this says on small screens they take up twelve columns in width; when it reaches medium it goes to six columns in width. Again, okay cool so this is all working. All right then. So let's do a few more examples. What I'm gonna do is change this thing right here to four columns in width for extra small screens. When it gets to medium I'm gonna say take up two columns in width. Now I'm going to copy this and paste it a couple more times. So let's think this through. We have this element at the top which is twelve columns in width on extra small screens and six on medium sized screens. Then we have these three and on extra small screen sizes that's all four columns in width. Now four plus four plus four is twelve so they're going to take up the whole row between them and then on medium two plus two plus two is six and that's going to take up half of the row. This will take up the other half. So let's save this and preview it and now we can see on medium sized screens it's two, two, two and also six and if we make this smaller on extra small and small we get this one taking up twelve columns and these take up four. All right so there we go that's how we layout elements using the grid system.
Spacing, Justification, and Further Resources
Now what I'm going to do is just one more little example just to show you some of the spacing options we have. So let me come down here and I'm going to create a new row: VLayout. Now this is going to be a row again and we're going to wrap the elements when there's not enough room and inside we need some VFlex components as well. So let's do the first one VFlex and we'll say that on extra small screens this is going to be four columns in width then when it reaches medium size screens it's going to be three. So let me just create a button inside here so VBtn. This is going to have an outline prop again so we can see on the page and also block to make it a block-level element. We'll give it a class this time of success just to make them a different color and inside here we'll say one. And then we'll do the same thing; we'll grab this flex item and I'm going to paste it down below and it's going to have the same width on extra small screens and on medium it's going to be three as well. So let's say this is two. Okay now you'll notice that on medium sized screens we have a width of three and a width of three; now that is six in total and on extra small it's going to be four and four in our values eight in total. So in both cases they're not taking up the full width of the available space in the row. Let's see what this looks like first of all and we can see it right here. So on larger screens it's only taking up this space and we have all of this space empty and on smaller screens again it's taking up this space and this third of space is empty as well. Now that's fine; we don't have to take up the whole row of space. However if you just have two elements you might want to position them differently. For example you might want to put them in the center or you might want to flop them to the right, etc. So how do we control that behavior? Well we do that by adding props to this VLayout, this row. So there's many different props we can use. The first one I'm going to show you is going to be justify-space-around. So if we save this now what's going to happen is it's going to justify them in the center and space around them. Okay so that looks a bit better right. So that's one option we have. We could say justify-center, save that, and that puts them in the very middle without spacing between them but space on the left and right. Or we could say justify-end and that's going to put them hopefully at the end. If I've got this right, yep, puts them at the end. Okay so that's how we move it around on the screen as well if we don't take up all of the available space. I think I like justify-space-around and by the way we can do justify-space-between as well and that is going to just put space between them and we have one on the left and one on the right so no space on the outer edges. Again I think I'm gonna do justify-space-around like so because I think that looks best. So if you want to learn more about that just make sure you check out the grid section on Vuetify; just type in grid over here, go to Grid System and you're going to see all these different examples on the page so you lay out your content differently. These are some of the options I was just showing it right here; we can also align items, justify them, and add these different options as well and it's going to give you the resulting code down here. All right so we'll be learning more about the grid as we go forward. This is not the end of it and it's going to start in the next video where we're going to start to lay out our actual content for the application using this grid system.
