Skip to Content
Advanced CSS Grid

In the previous lesson, you learned all the foundational properties necessary to create a two-dimensional grid-based layout for your web pages! In this lesson, you’ll learn the following additional properties that you can use to harness the power of CSS Grid Layout:

  • grid-template-areas
  • justify-items
  • justify-content
  • justify-self
  • align-items
  • align-content
  • align-self
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow

You will also learn about the explicit and implicit grids and grid axes.


Examine the code in the browser to the right. Expand the browser by clicking the diagonal arrow next to localhost:8000.

You’ll be updating this fictional recipe site as you move throughout this lesson! Continue to the next exercise when you’re ready.

Folder Icon

Take this course for free

Already have an account?