Get an overview of how to define a specific number of grid lines and tracks, using the grid-template-columns and grid-template-rows properties, to create an explicit grid.
- [Instructor] To define a specific number of grid lines and tracks, use grid-template-columns and grid-template-rows. This will create an explicit grid. These properties are declared in the grid container with the values expressed as a track list separated by a space to designate the number of tracks. These properties can be defined using a variety of value types. In this course, we'll mostly use pixels and two new units and values I'll be discussing right now. The grid layout introduced a new flexible length unit fr. This represents a fraction of the available space in the grid container. If the value of grid-template-columns is set to one fr three times that will split the grid into three equal columns, but if the value is set to 1 fr, 2 fr, and 1 fr, the grid items will still be arranged into three columns, but the second track will take up twice the amount of the first and third track. The same logic applies to grid-template-rows. We can also define multiple tracks using another value, the repeat function. Instead of writing 1 fr three times, include the number of tracks, three in this example, followed by a comma and the size of the track such as 1 fr within the parentheses. The repeat function can also be used to repeat all, or just part, of the track listing. Different units can also be mixed together. In this example, our first column is 50 pixels wide and our next two columns are equally spaced. Gutters can also be added between grid items using the gap property. One value adds the same amount of space between the rows and columns. Two values sets the gutter for the rows then the columns. Gap can be used with any length unit, the calc function, or a percentage but not the fr unit. The gutter space can also be declared independently using the longhand properties, row-gap and column-gap. Originally, the grid layout module defined the gap property as grid-gap, and the longhand properties as grid-row-gap and grid-column-gap. This property was updated to be used for both Flexbox and grid, but right now gap is only supported for Flexbox in Firefox. Before grid layouts, gap and the previous grid prefix properties are supported in all modern browsers. Let's put all of this together in an example. The first step is to declare the grid container. Down on line three, let's add that in. The grid items will look the same, but now we can apply the grid properties. So let's add in three columns with grid-template-columns, each set to 100 pixels in width. Now, we'll add two rows with grid-template-rows set to 100 pixels each. Let's try updating the column value using the repeat function instead. We'll add repeat with the parentheses and back inside the parentheses, we'll add the number of columns that we want, 3, and the width, 100 pixels. The grid should look the same since we're only changing the way we set the value. To add or remove columns, just change the first value. Let's put it back to three columns, but instead of using pixels, let's change it to the new flexible fr unit instead. To create three equal columns, set the value to 1 fr. The grid will then split into three equal parts. Not only are these columns equal, but they're now also flexible. Let's resize the view port to see how it scales. The repeat function can also be used with other values. Suppose I wanted the first column to have a fixed size of 100 pixels, then the remaining space could be split evenly into two columns. I can do that by just adding 100 pixels as the first value and then repeating the last two columns, set to 1 fr, so that they can be split evenly. Since we used pixels for the first column, it will have the fixed size applied to it, but the two columns set with the fr units will still be flexible. So far, we've been making changes using grid-template-columns, but these value types and units can also be applied to grid-template-rows. And, speaking of the rows, right now there are two values indicating two rows with the height of 100 pixels. Let's delete one of those values. Now the height of the second row is the same height of its content. It's no longer 100 pixels in height because we've only declared one explicit row. Any items that are within the grid container but are placed outside of the explicit grid will be placed into an implicit grid and will be sized according to those rules which we'll discuss in the next lesson. We'll also be continuing with this pin, so keep this open for the next lesson as well.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts