From the course: CSS Essential Training
Unlock the full course today
Join today to access over 23,400 courses taught by industry experts.
The explicit grid - CSS Tutorial
From the course: CSS Essential Training
The explicit grid
- [Instructor] When using the CSS grid layout, the number of grid tracks can be defined with two properties, grid template columns and grid template rows. These properties are declared in the grid container and each value is separated by a space and represents the number of grid tracks. This will create an explicit grid. The grid layout also introduced a new flexible length unit, fr, which represents a fraction of the available space in the grid container. For example, if grid template columns is set to 1fr three times, the grid will split the available space into three columns each with the same width. If the value is set to 1fr, 2fr, 1fr, the grid items will still be arranged into three columns, however, the second track will take up twice the amount of space as the first and third tracks. Values that are repeated can also be defined using the repeat function value. Instead of writing 1fr three times, add the…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
Intro to Grid and Flexbox59s
-
(Locked)
Intro to Flexbox2m 25s
-
(Locked)
Flexbox: Orientation and ordering3m 1s
-
(Locked)
Sizing with flex properties2m 29s
-
(Locked)
Flexbox exercise3m 51s
-
(Locked)
Project: Sticky footer with flexbox5m 39s
-
(Locked)
Aligning flex items3m 20s
-
(Locked)
Project: Aligning elements with Flexbox3m 41s
-
(Locked)
Intro to CSS Grid2m 23s
-
(Locked)
The explicit grid3m 59s
-
(Locked)
The implicit grid2m 58s
-
(Locked)
Adding gutters with the gap property1m 21s
-
(Locked)
Project: Adding columns with Grid8m 15s
-
-
-
-