Vuetify Tutorial #14 - Grid System (part 2)

Key Takeaways

all right then so we've seen how the basics of the grid system works in VY now I want to take that and actually start to create our design our template now on the dashboard we're going to use the grid to display a list of different projects my projects and other team members projects as well now for each project we're going to need a title A person who it's by or who it's assigned to a due date and the status is it overdue is it complete or is it ongoing something like that so we're going to create a grid to Output these different elements in each row so let's do that first of all we need to delete all of this stuff we've got up here like so we'll keep the container and the first thing I actually want to do is create an element called vyen card now we've not talked about cards yet so I don't want you to worry too much about this but all this is going to be doing is creating a white background for us with some nice rounded Corners I'm also making this flat so that it's flat against the screen and we don't see the Box Shadow okay so now inside here we need a row and to do that remember we use V layout so V hyphen layout like so and this is going to be a row and we want elements to wrap if there's not enough room and then inside this we're going to do our different Flex items so remember we need a project title in each row we need the person in each each row we need the due by date in each row and we need the status in each row so each one of these is going to be within its own Flex item so let's do vyen Flex for the first one and make sure you spell that correctly like so and this is going to be for the project title now on extra small screens and remember always start at the beginning extra small and work your way up on extra small screens I want this to be full width so 12 columns in width then then when we get to medium size screens MD I want this to be six columns in width so half of the grid width okay so this is the title now the title is going to have a little heading and that is going to be inside of div so I'll say div and then give this a class of caption because we want it to be quite small and also of gray double hyphen text so we'll say project title so this is just going to sit just above the actual title so if we preview this it's going to look something like that and then the project title is going to be underneath it so for example if I come down here and do another div and this time inside we'll say create a new website save that then that's going to sit underneath this okay now then at the minute this stuff right here is flush up against the side of the card this card thing here is the white background so what I'd like to do is just add some padding to this card so I'm going to say class equals and then PA and it's going to be three all the way around so let's save that and view it and by the way you need a hyphen after a so save that and now that looks a bit better okay so this project title this is going to take up six columns in width so it's going to go to about here so after that I want the person roughly here so let's do another Flex item for that so V hyphen flex and then this time we're going to start with extra small screens again and it's going to be six columns in width on those side screens on small it's going to be four and then on medium it's going to be two all right so inside that we want one of these things again so let's copy that and paste it down here and this time this is going to be the person and underneath that we need another div for the actual person the net ninja so let's save that and view this in a browser all right looking good so we also need the due date and the status so let's do those two next what I'm going to do is just copy this thing for the due date now the due date is going to be the same as this for extra small it's going to be six columns in width for small four and for medium two so we'll change this right here to due by and then we'll just put in some kind of date here we'll say the 1st JN 2019 so save that and view that all right looking good and lastly we need the status so let's do one more I'm going to paste this again this time for extra small screens this is going to be two columns in width then for small screens this is going to be four again and for medium two so this time it's going to be status right here and then underneath we'll just say ongoing all right so this is going to change later on when we come to use chips and style this a bit better but for now we're looking at the grid and this is looking pretty good it's taking up the full 12 columns now on desktop and that's because we have six plus 2 which is 8 plus 2 which is 10 plus 2 which is 12 so that's working now as we get to medium size or rather small size screens then we're going to see this change a little bit so let's Zoom down and see what happens so gets to a certain point and then we get this layout so these three right here have gone through the next line the top one here is still taking up six columns in width because we've not reached extra small yet but these ones all take up four columns in width now and they're down on the next line if we go smaller again this is going to go to the next line because there's not enough room okay so that's nice and responsive so that is our basic layout for a row of content for one single project now ideally what we want to do is display this many different times so we could take this and we could copy it and we could paste it you know a few times like so and it's going to look something like this over here now that's fine but ideally I don't want to hard code this in the template what we' like to do is instead create some data down here and then cycle through that data so we'll create some projects and then use V4 to Loop through that data and output a new row for each item in that data all right so that's what we're going to do in the next video