1.8 Raster Grid System

Welcome back to the course. In this lesson, you'll learn how to use the raster grid system for creating layouts. This is based on CSS grid layout is very powerful and it has a pretty unique syntax, let's find out more. You can get the raster grid system at this address right here where you can also find a demo and of course a general explanation of how well everything works. And to download it, we just click this button you download the CSS file directly, just like I did. And you'll see that I have a raster.grid.cssfile, all ready to go in my project folder. So now all I have to do is say link raster.grid.css and now I'm ready to go. Now just a quick note before we get started, when you download this archive, it contains two CSS files. It has that raster.grid.css which I showed you. And that’s just the grid, the essential functionality of the grid. There’s also a CSS file called raster2.css. That adds a small framework you can use, but we’re not gonna bother with that. For now just use a raster.grid.css. So let's see how this thing works. The syntax is pretty interesting, you start with an element called r.grid. This is a custom element. And to it you set how many columns you want in your grid. And then you define your cells with the element r.cell. So let's grab a couple of these, let's actually do it this way. I believe it's the syntax, yeah. So r.cell will basically create the cells. So now here's our grid. Now let's add some very simple styling so that we can see r.grid better. Now this has nothing to do with the grid itself. It's just so that we can better see the columns. So on r.cell, I'm simply gonna add a background color. And I'm gonna add color white for the text. Let's do a border radius. Four pixels, align the text in the center. Maybe a little bit of padding and a little bit of margin. All right, so now this shows us exactly how the grid works. We have the cells being displayed like this. And because I was saying that this is based on CSS grid layout, we can actually target the grid and we can set a grid gap, let's say one REM, Cool. So let's see what kind of layouts we can create with this. Well, let's do an r.grid. Again, set 12 columns, and then we can do r.cell. If you do it like this, it's gonna span one cell by default. But you can specify how big you want this by using span four, for example, and this will span four columns like this, right? So it goes 1, 2, 3, 4, let's do another r.cell. And this is one cell by default. And it can also do r.cell span equals 7-12. This will basically mean that it starts in column 7 and end in column 12, right? So it starts here and it ends here. You can also do the following, let's create another grid with 12 columns. And by the way, you can create as many columns as you want, you're not limited to 12. I chose 12 because it's an easily divisible number. So you can create an r.cell where the span is for example 1 + 3. This means it starts in 1 and spans 3 columns, all right? As you can see here. Also what you can do, is r-cell span = 4.. That means it starts in number 4 and span the rest of the row. All right, so any number, dot dot, it's gonna start in that number and span the rest of the row. All right, so that's the basic functionality of the grid or the basic syntax of this grid. You create an r.grid container, you set the number of columns, and then you would define your cells. And using the span attribute, you would define how big those cells should be. Now there are also some responsive characteristics to this grid because this is a responsive grid. And the first one is you can set columns -S for small equals, let's say 6. That means that when resized, okay, this grid will now have 6 columns instead of 12 on small screens. So anything that's less than appears 600 pixels, anything bigger than 600 pixels gets the normal 12 columns. You can also define different spans for different screen sizes. So for example, here you can say span-s= let's say one through six. So on small screens we go one through six. And this we can say span-s equals 7 through 12, so we're basically dividing this in two, okay? So on large screens, we have two columns like this 1 through 3 and 4 through 12. And on small screens, we have an equal number of columns, 3 and 3. And you can play around with these, you can get the grid dialed in just the way you need it. And if you want to configure it, you can go to the official webpage here. And if you scroll all the way down, you can actually change some values like instead of the r prefix, you can do rg for raster grid. And it's gonna change the CSS file for you. How many columns do you want by default? Maybe 12 or 22 or whatever. What are the breakpoints that you wanna use? 600 is for small screens, 1600 for large ones. You can change the grid attributes, the cell attributes, and the suffixes. And once everything is configured, you just click here, copy and you paste it in here. You just replace this with the updated version. And that's it for the raster grid system, pretty powerful, right? And I think it's actually very intuitive and easy to use. Now let's shift gears a little bit and talk about loaders. I'm sure that at some point you needed one of those spinning circles to visually describe a loading state. Well, the next library offers a lot of different spinners all made with CSS. That's coming up in the next lesson.