Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:12Length:1.2 hours
Grid 3
  • Overview
  • Transcript

2.4 Controlling Rows and Column Height

So far we’ve covered a lot of ground on controlling your grid’s columns, but what about rows and their heights? Learn all about postcss-ant’s row() method in this lesson.

2.4 Controlling Rows and Column Height

Hey, welcome back to grids and layout tricks with postcss-ant. So far we've been focusing on columns that make up your grid. But in this lesson, we're gonna go through how you can control rows. Both by using the columns method to create multiple rows. And also by using the rows method to control the height of your rows. First, let's add to what we've already done with our columns method that we have here. To add a second row that has a different alignment in its columns. So we're gonna change up our formatting of our code here just to make it a little bit easier to look at. So, we're gonna go inside the brackets here, put this onto a new line. And then we're gonna put gutter onto a new line. And we'll put our colon down here. And then we're just gonna tab indent the values that we have here. Now this space separated list of values that we're using right now is referred to as a size set. However, you can have as many size sets in your column method separated by commas as you want. So what we can do is we can add a comma at the end of this first size set. And then for the next row, we can define a completely different size set to control the columns on that next row. So it can be anything you want. Let's try 1/3 auto 1/3 auto. And now watch the width of the columns on the second row change? There we go. And now just out of interest, if you were to repeat the columns that you already have. You would just get the same thing going over and over again. So you've got the first size set, the second size set, the first size set, the second size set. So just get rid of those again. Keep it a bit simpler to look at. Now if we wanted to we could also have a different number of columns in the second row. So we could get rid of this fourth value here. And we'll get rid of our eighth element there and save. And so now that's a different number of columns on the second row. So that's one of the ways that you can start to implement different controls and different layout from one row to the next. And the other way that we're gonna look at is using the rows method. So after our columns method here, we're gonna add rows. Now the way the rows method works is you provide a height for every column that you've created up here. So we've got four in our fist size set, so we'll need to provide four heights. So we'll make them all 250px high. So there's four for our first size set, and our second size set here has three. So let's make all of those 400px high All right, now let's see what the effect is. All right, so now we've got all of the columns in our first row at 250px high. And all of the columns in our second row of 400 pixels high. Now you can if you wish provide different heights for different columns. So let's say, we'll make every second column up here 150 high. So, now you can see that these columns are sized independently from these columns. And incidentally when you're using the rows method, you don't need to include this gutter value here unless you are trying to override the default just for this grid alone. And we're actually gonna be talking more about gutter settings and local settings in the next video. But if you're happy to just use the default gutter sizes and you are using rows, then you can get rid of that gutter specification. And you'll still have the same amount of gutter, both vertically and horizontally. So in the next lesson, we're gonna be going into how you can get more specific control over gutters. And how you can override some of ant's global settings on a local basis which can be really useful for things like nested grids where you want a parent grid to have a certain type of behavior and you want a child grid to be different. So we're gonna go through all of that in the next lesson. I'll see you there.

Back to the top