Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:12Length:1.2 hours
  • Overview
  • Transcript

2.2 Generate a Grid

Hey, welcome back to grids and layout tricks with postcss-ant. In this listen, we're gonna be creating a basic grid. There are two files that you're gonna be working within this lesson. One is the style.css file from your source folder and the other is the index.html file from the root folder of your project. We're gonna start by adding a little HTML that we're gonna turn into our grid. So first off, we'll just add a horizontal rule, just to give us a little separation. And now, we're gonna set up our basic grid. So we have a section with the class basic. And then in here, we're just gonna have six divs. They don't need any special classes applied to them. These can actually be divs or any other type of element. So we're just gonna add div and then we'll repeat that. We're gonna have six divs in total. And then just so we can differentiate, we'll just add some numbers inside each one of these divs. And that's all we need for our HTML for this basic grid, we don't need any special mark up at all. Everything is gonna be handled in the CSS. So we'll jump into our style sheet. And you notice there's a little code here already. That's just to give us some default styling to the grids that we produce. Now, let's set up our styling on our basic class. Now to generate our grid, we're gonna use postcss-ant's generate grid method. So, we're just gonna type in generate-grid. And we'll add a colon and a semicolon. And then inside here, we're gonna add columns with a set of brackets. Now in between these brackets is we would define the widths of the columns that are gonna make up our grid. And you can put any number of values in here in a space separated list and for each value, you get a column menu grid. So if I add six values, I'll get six columns. If I add three values, I'll get three columns. The grid that we have currently has six divs, and what we want is to have three columns with the first three divs creating one row. And then the subsequent three divs, creating another row. So what we're gonna do is add in one quarter, this is going to make the first column one-quarter of the available width. Then we're gonna add in auto, and then we're gonna add another one-quarter. Now our third column is also gonna be a quarter of the available width, and our second column is just gonna fill up the remainder. And there are three types of values that you can enter into these columns method. You can add any valid CSS fixed width, you can add a fraction or you can add order. And we're gonna be going through those three things in more detail in the next lesson. But for now, that is all we need to generate our basic grid, so let's save that and see what we get. There we go, so just like that. We've got one line of code, all we've had to do is define the columns and then that is automatically created the grid out of our divs. You'll notice also that we've got a nice amount of spacing vertically in between each one of these columns. And that's due to postcss-ant's automated gutter functionality. If we want to, we can also trigger our gutter to come up in between the rows. By default, when you set up a grid this way, you're only gonna get those vertical gutters. So we're gonna tell the system that we also want horizontal guters by just adding to the int gutter with a set of brackets, and then to specifying the size that we want our gutters to be. So, let's just go with and ant's default gutter size which is 30 pixels, and we'll save. So, there we go, now we've got gutters in both directions and our grid is fully functional, and this is actually fluid by default. So, if we change the size of the window, the grid was stretched to fit. So you get the basic foundation for responsive layouts in your grid out of the box. And we're gonna talk more later about how you can use postcss-ant in with media queries to add even more responsive functionality. Now, we touch briefly on the type of values that you can specify for your columns. But there are also a few extra things that you'll need to know and that you need to think about when you're setting up your columns. And that's what we're gonna go through in the next lesson. I'll see you there.

Back to the top