From the course: CSS Essential Training

Unlock this course with a free trial

Join today to access over 25,600 courses taught by industry experts.

The explicit grid

The explicit grid

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

The explicit grid

“

- [Instructor] In grid layouts, two properties are used to define a fixed number of grid tracks to form an explicit grid, grid-template-rows and grid-template-columns. These properties are declared in the grid-container, and each value adds and defines the size of a row or column. They can be used with standard length and percentage values, but there are also grid-specific values that were introduced with this layout module. Grid can also be used with the fr unit, which represents a fraction of the available space in the grid container. Here's how it works. If grid-template-columns is set to 1fr three times, the grid will create three equal columns. If the second value is set to 2fr, it will still create three columns, but the middle track takes up twice as much space. Repeated values can also be set with the repeat function. Specify the number of tracks in the parentheses, followed by a comma and the track size. Let's…

Contents