FREELessons: 8Length: 45 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 The Grid

In this lesson, you will learn what the Materialize grid system is and how you can use it to easily lay out your websites.

Useful Links

2.2 The Grid

Hello and welcome back. In this lesson, I wanna give you an overview of the grid system within the materialized framework. And the grid system allows us to very easily layout or content. It gives us columns to work with, and they're very flexible as far as how wide these columns can be. And we'll take a look at that in just a moment. But first of all, I wanna show you how we've set up our CodePen file. So you can find the URL for our starting CodePen here In the course notes for this lesson. Once you open that up, go ahead and click on fork to create a new copy of that CodePen, and you can make all of your changes in this new copy. And then once I've made all of my changes in this lesson, you'll also be able to find the URL for our ending CodePen in the course notes for this lesson as well. So let's jump into our Settings here. So we can take a look at what we need to set up. So if we jump over to CSS, you'll notice that I have a link to these CDM files for the materialize.min.css file. You can find this in CodePen as one of the quick add options here at the bottom you can see materialize right here. So that's all we need for the CSS. But if we jump over to our JavaScript, we need a little bit more. We need jQuery first of all, and then we need the materialized Min JS file. Now this materialized Min JS file is not available in the Quick Add section. Maybe they will change that in the near future, I don't know. But right now it's not available. So if you go to the website, and go to the Get Started link as we talked about in the last video. You can find a link to this JavaScript file, or you can download these files locally, if you prefer to work that way. Now the materialize framework also makes use of some icons that we're gonna take a look at later on which will require us to a point to another CSS file but we'll get to that later on. For now these are the only files we need to worry about. So let's Save and Close that. And you'll notice that I have added a little bit of CSS, I wanna be able to visualize what these columns look like as we build this out. And so in order to do that, I've given our columns kind of a light red background color with a white text. So that should allow us to see our columns as we build them up. So now let's jump into our HTML window and let's get started. So when we're laying out our website using material lines, the first helpful class that we're gonna be using really, really often is going to be the container class. This is just like the container class in boot strap if you ever use boot strap. The container class basically puts all of your content within a specified width and that width will change. This is responsive so it will change as you change the size of your website. But it's a very helpful class, and we'll be using it a lot. So the way we're gonna do most of our work, in this course, is we're gonna put everything inside a div, with a class of container. Now I'm gonna be using Zen coding here, in CodePen, which is basically just a shorthand way of typing HTML if you never used it before. So if for example you want to create a div with a class of container, you can do it this way. You can type in the word div., there's no spaces here. We're just gonna say div and then container. Once we've typed that out, all we have to do is hit the tab key, and you'll see that it creates that div for us. So it just saves a little bit of time. There are a lot of text editors that you can use Zen coding with and CodePen includes it by default so I really like that. So you'll notice it puts the cursor right in between those opening nad closing div tags. I'm just gonna hit Enter a couple of times to move that closing div tag down. And then we'll get started. So we have our container div. First of all, let's see what this looks like without a container div. I'm gonna create a paragraph here with some random text in it. And we can do that with Zen coding by typing p, which is the Name of the paragraph element and then the greater than sign and then the word lorem which will give us some ipsum text. So I'm gonna hit Tab and you'll see it creates a paragraph of some lorem text inside it. So if we look on the right, we can see that this text takes up the full width. Now let's put this inside a container, so I'm gonna highlight all of this and just get rid of it. And we do what we did before again. I'm gonna take DIV.container and this time I'm gonna use Zen coding to put a paragraph inside it. So I'm gonna say, > P > lorem, L-O-R-E- M and then tab. And you'll see that it creates that entire markup for us. And now you'll see that our text doesn't go all the way to the edges of the viewing area. It's contained within this container now, which has a specified width. Now we haven't taken it far enough yet, because inside our containers we need rows and columns. So inside this container let's just go ahead and just get rid of this paragraph we don't need that anymore. Inside this container I'm gonna create a row. And the way we create a row is we create a div with a class of rows so, div.row tab. And that'll create a row for us. And then inside that row we can have any number of columns. Now the grid layout from materialize, is built on a 12 column system, and when we create our own columns, we need to specify how many of those 12 columns we want our columns to span. So if we want a column that's gonna take up the full width then we would want it to span all 12 columns, and the way that looks in materialize is we're gonna create a div here. I'm gonna give it a class of col for column, but we need to give it another class, as well, to tell it how many columns to span. And for now, I'm going to use an s class. There are a few different types of size classes we can use but for now, I'm just going to use s. And the way we do that is we type s, and then the number of columns we want it to span, in this case I'm gonna say 12. And then, inside that, I'm gonna have an h3 tag. So I'm gonna do greater than and then h3 and then tab. So inside of this h3 tab I'm just gonna say Title so that we can have some kind of content in there and there we go. Now again because our CSS has specified this col class and given it a background color. We can actually see that here. Usually you would just see black text on a white background. But we've added our own CSS so that we can see these columns and see what they look like. So that's what a column would look like if it spans all 12 columns of our grid system. If we want it to take up half of the width of the grid system, as you can imagine, we would use s6. We only want it to span 6 of the 12 columns. So let's create a new row after this row. And we could just highlight all of this, copy it, go down to the next line and paste it. And for our next row, let's just give this column a class of s6. And now we can see that that column only takes up half the width. And then we could create another column just like it inside that same row. So we could highlight this column here, copy it, paste it, and now we have two of those columns side by side. If we want a column that takes up one-third of the width, we would just divide 12 by 3 and that would give us a span of 4. So we could create another row down here, div.row. Inside that row we could create three divs that have a class of column, col plus another class of s4, and if we want there to be three of this, we can surround this whole thing by parentheses. And then after the parentheses, we'll just say times 3, and then hit Tab, and that creates three of those columns for us. So this is all one third, so we could just say third, and I'll just copy that and paste it. And now we have three columns next to each other that each take up 1/3. This might be a little easier if those are inside h3 so that everything is the same size here. So let's go ahead and put that inside an h3. And there we go, so I'll just highlight that entire h3 and copy it. And then we'll paste it a couple of times. There we go, so you kinda get the idea here. We can specify as many columns as we want to. And if we want all of our columns to add up to an entire row, we just need to make sure that these three numbers here add up to 12, 4 + 4 + 4 is 12. Now, we can also specify, how wide we want these columns to be at different browser sizes. The s, that we've been using so far, stands for small. We can also, use M for medium, L for large, and XL for extra large. So, we can specify different widths at different browser sizes. And we're gonna keep it pretty simple here. But for now, let's say we have these three columns, each one of them at a small browser size is gonna span four columns of our 12 column grid system. If we only include the s, then it will use this number here at all browser sizes. But if we were to specify, for example, that at small browser sizes, we want it to take up the full width, so we'll use s12 for all of these. But then maybe at medium-size browsers and up, we wanted it to take up four columns, so once we get up to a medium size browser and a larger, these columns are gonna take up four columns of a good system. So now we can see that a whole one third of the width, but if we go down to a smaller size, we see that it jumps down to a full width. And we can do the same thing using the L classes. So we could use L for or L1 or however wide we want it to be. And we can do that using Excel as well. And there's one more thing I wanna point out with the grid system, we can also use offsets. So if we have a column that for example, maybe we want to center it here. Let's go ahead and create a new row here. So we'll do div.row, Tab, and then inside that row, I'm gonna create a single column. So we're gonna create a new div here, with a class of column, so div.col and then again if we wanna add a second class we just say dot again and then whatever that second class name is. And let's say we want it to be half the width of our full column system, but we want it to be centered so we wanna nudge it over a little bit. So if we want this to be centered, right now it's taking up half the width, and let's go ahead and hit Tab so we can see what that looks like. And we'll put another h3 here, and I'll go ahead and put a title inside it so we can see the text. So right now, this takes up half the width, but if we want it centered, then we can offset it by moving over. And since there's six columns left over on the right side, we can offset it by half of that to center it. So we're gonna offset it by three columns. And the way we do that, is we can add another class here after our s6. And we're gonna call it offset-s3. So at a small browser size and up, we're going to offset this by three columns. Now we can make this responsive, as well. Let's say that we want this to be how it looks at small browser sizes, but maybe at larger browser sizes we want the column to be wider. So let's say any browser size medium and up, we want it to take up eight columns of our 12-column system. And then we can add another offset, And we would do offset-m. And this time we have 4 columns left over if we take 12 minus this 8, we have 4 columns left over. Half of that is two so we're just gonna offset it by 2. And now we can see that it's centered again at a medium size and up. And if we get back to a smaller size, it jumps down to six columns wide, offsetting by 3. So those are the basics of how the grid system works in Materialize. Thank you for watching, and I'll ese you in the next lesson.

Back to the top