Learn

Great work! You have learned many new properties to use when creating a layout using CSS Grid! Let’s review:

  • grid-template-areas specifies grid named grid areas
  • grid layouts are two-dimensional: they have a row, or inline, axis and a column, or block, axis.
  • justify-items specifies how individual elements should spread across the row axis
  • justify-content specifies how groups of elements should spread across the row axis
  • justify-self specifies how a single element should position itself with respect to the row axis
  • align-items specifies how individual elements should spread across the column axis
  • align-content specifies how groups of elements should spread across the column axis
  • align-self specifies how a single element should position itself with respect to the column axis
  • grid-auto-rows specifies the height of rows added implicitly to the grid
  • grid-auto-columns specifies the width of columns added implicitly to the grid
  • grid-auto-flow specifies in which direction implicit elements should be created

This is a great time to experiment with the code in the code editor and try any of the properties you want to practice more! When you’re ready, move on!

Instructions

1.

This is a great time to experiment with the code in the text editor to visualize any of the properties covered in this lesson! Move on when you’re ready.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?