CSS Grid Layout Course (How To)

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.

Chevron 7 steps

• Understanding Grid

  2:42

• Grid Concepts and Terminology

  1:47

• Intro to Grid Review

  6 questions

• Defining a Grid

  4:39

• Setting Grid Rows

  2:43

• Add Gutters Between Rows and Columns

  4:18

• Understanding Grid Challenge

  4 objectives

Flexible 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.

Chevron 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.

Chevron 7 steps

• Firefox Grid Inspector Tool

  4:40

• Position Items by Grid Lines

  9:19

• Negative Grid Lines and Shorthand Syntax

  4:20

• Placing Elements Using Grid Template Areas

  8:05

• Adjust the Grid with Media Queries

  5:51

• Using Grid with Flexbox

  3:59

• Grid Layout Review

  7 questions