- CSS
- Intermediate
About this Course
CSS Grid Layout provides a built-in, more efficient way of designing grid-based layouts in the browser. It brings a new set of properties, functions and flexible units that let you control the exact placement and sizing of grid components.
What you'll learn
- Declaring row and column tracks
- Setting gutters between rows and columns
- Creating flexible and responsive grid layouts without media queries
- Using Grid with Flexbox
Introducing Grid Layout
Grid Layout provides a set of properties, functions and flexible units that let you control the sizing, positioning and spacing of content. You can build layouts faster and more easily than any layout tools you've relied on in the past.
7 stepsFlexible Sized Grids
Grid Layout introduces new features that adapt content to available space and intelligently size and position items within a grid container. This supports responsive design and makes it easier to create layouts that work in a variety of different browser sizes, without the use of media queries.
10 steps-
Introducing fr, a Flexible CSS Length Unit
4:30
-
Flexible Tracks Challenge
1 objective
-
Set Tracks with repeat() Notation
1:45
-
Repeat Notation Challenge
1 objective
-
Flexible Track Sizing with minmax()
4:09
-
Repeat Tracks with auto-fill and auto-fit
7:23
-
Auto-generate Flexible Columns
1 objective
-
The Explicit and Implicit Grid
4:52
-
Control the Auto-placement of Grid Items
5:43
-
Flexible Sized Grids Review
6 questions
Going Further with Grid Layout
Learn alternate methods for positioning items on the grid, and tools, features and concepts that will make you a stronger developer of grid layouts.
7 stepsTeacher
-
Guil Hernandez
Guil is a Full Stack JavaScript and Front End Web Development instructor.