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 to the right of 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.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?