Materialize Tutorial #9 - Responsive Grid

Key Takeaways

alright then gang so I want to talk about one of the more widely used layout features of materialized right here and that is the grid system so the grid system allows us to display content in a grid like fashion on a website now if you've been designing websites for a while before or used anything like bootstrap you're probably familiar with a grid system basically it splits up our contents into rows and columns and this particular grid is 12 columns in width that means that if we wanted an element to occupy one column it would take up one column in a width of the website makes sense so you can see there's 12 columns right here and each one of these corresponds to a different div right here but if we wanted an element to take up say four columns or six columns we can do that if you look down here we can see that this D right here is 12 columns wide this one is 6 columns wide so it takes up half the screen and if we scroll down further you might see different examples note we don't but I'm going to show you plenty of them so to start with we need a class of row surrounding all the elements this right here this is a row of elements and each one of these elements these divs inside is specified how many columns in width it's going to take up right here as a class now every element which takes up some kind of column width inside a row that has to have a class of call and then this optional class saying how much is going to take up how much space it's going to take up so let's do a few different examples of this I'm gonna head over to index J s and you can see at the minute we just have a container and we have this H 14 grits so I want to create a new row this is always the first step when we're working with a grid we'll create a row of content so to do that lets do a div with a class of row ok then so then inside this room say for example I want four different elements well they're all going to be divs and they're all going to take up some space in this row so they all need to have a class of Col whenever we take up column width we have a class of cult generally anything directly inside a role has a class of coal like this now I'm going to duplicate this by pressing alt and shift and pressing down a couple of times so we've got four in total so if we look at this I'm gonna save it view in the browser at the minute we don't really see anything that's because we've not given this any kind of width or space but if we say over here first of all content and then I'll do the same down below of content and then the same for these two content and content if we save it now and preview it then we're just going to see these things right here so automatically the default behavior here is that they're taking up the width of the content alright so if we type something in bigger here like you're ready content content then save it automatically it becomes bigger now we don't want to do that we want to say how many columns of width we want each one of these to be so we can say that different screen size is how big we want those columns to be or how many columns we want a particular element to take up so the way we do that is we generally start at small screen sizes working from mobile and up so say for example for small screen sizes I want each one of these divs to take up three columns in width so that's three six nine twelve that's the full grid so I can do that by saying s for small screen then three to say I want it to take up three columns of width for small screens so I'll do the same down here s3 and then the same again s3 and then finally the same again s3 so all of these now are going to take up three columns of width on small screens now if I view this in a browser we can see down here three columns of width which is a quarter a quarter of 12 right because 3 goes into 12 4 times so they're all taking up 3 columns right now and it's not just for small screens it's also for large screens no matter what the screen size at the minute is is taking up three columns of width and yeah it gets bigger but that's because the screen size gets bigger and the overall grid size gets bigger but it's still taking up a quarter of the grade three columns so when we use something like this s3 it means for small screen sizes and up but what if we want to give something a size for the small screens and then for a medium sized screen our allies sized screen we want to give them a different width well we can do that as well what I'm gonna do is grab all this and press alt shift down to duplicate it to create a new row and then inside this wrote what I'll do is say okay for small screens I want this to be six columns in width so if we save this now and view this in a browser and by the way they get these styles this gray background and stuff because I just added a bit of padding background and line height right here and margin between the rows so that you can see these blocks individually but anyway we've given each one of these a class of s 6 which means for small screen sizes and don't give each one of these divs six columns in width so the first to go across and they span the whole grid width then because there's no room left over it goes on to the next line six columns again six columns again and it's the same as we get larger it's always six columns in width now if we wanted for a medium screen and up to have say three columns have wit for each one of these we can say M for medium size 3 M 3 M 3 and you guessed it M 3 so let's save that and view that in a browser and so for small screens it still six columns in width as soon as it gets to a medium sized screen here it goes to three columns in width all the way up to large screens as well okay so that's why it's good to work from the bottom upwards because it's always s 3 meaning three columns for small screens and up until we reach another class where it says M 3 which means for medium sized screens and up give it three columns in width all right so what about larger screens as well well let's do that we're going to highlight that pressed alt shift and down to duplicate it and then what I'll do is also add on two more of these so let me duplicate those as well and then for small screens will do 12 for here so I'm going to alt shift click all of these so I can change them all at once and type in 12 so for small screens each one takes up 12 columns of width then for medium sized screens will do the same alt shift all of these and we want it to be oops made a mistake there won't shift and we want this to be 6 columns in width then when we get to large screens so L I want them to be 4 columns in width save that for you in a browser so start off small you can see they have 12 columns of width each they take up the whole grid width then when we get to medium they take up 6 columns in width then when we get to large they take up 4 columns in width 4 8 12 4 8 12 all right so this is a nice responsive grid now and this is how we can display our content or lay our content out on a web page so that on larger screens they can be next to each other and for smaller screens they can stop all right so let's do one more example what I'm gonna do is just duplicate this one more time and I'm gonna get rid of the last two we only want four elements this time around in fact no we'll keep those we'll keep six okay so we'll say 12 for small screens still 6 for medium screen still but then what we'll do is say what we want to do when it reaches extra-large screens so again I'm going to space or rather first of all I'll alt shift everywhere down here so we only have to write it out once then I'll do space then Excel for extra-large screens then 12 and so I'm seeing wedding nuts well rather - that makes more sense so when it gets to extra large screen sizes we're just going to take up two columns in width so let's save that and view this in a browser starting off small getting bigger which is this one at the bottom then bigger again then finally it should snap to two columns in width so 2 4 6 8 10 12 all right I did say that was the last example but I do want to do one more so shift alt down so duplicate now this time I am just going to do four elements and I just want to show you here that they don't all have to have the same number so so far we've been basically giving each one the same width in columns we don't have to do that what I'm gonna do is just get rid of a lot of this so I'm going to delete all the way down to medium like so and then for this one I'll say okay so for medium screens it up I want this to have eight columns of width this one right here is going to have four so 8 a 4 May 12th that will be one line and then the one below that is gonna have four and then the one below that is going to have eight so if we save this preview in a browser got a small first of all and we can see them stacked at the bottom but then when we get to medium size screens we can see 8 4 4 8 and it goes all the way up then two large screens 8 4 4 8 I'll write them my friends so that is the grid in a nutshell and we will be using it going forward to display different parts of content on our web page