Great work! You have learned many new properties to use when creating a layout using CSS Grid! Let’s review:
grid-template-areasspecifies grid named grid areas
- grid layouts are two-dimensional: they have a row, or inline, axis and a column, or block, axis.
justify-itemsspecifies how individual elements should spread across the row axis
justify-contentspecifies how groups of elements should spread across the row axis
justify-selfspecifies how a single element should position itself with respect to the row axis
align-itemsspecifies how individual elements should spread across the column axis
align-contentspecifies how groups of elements should spread across the column axis
align-selfspecifies how a single element should position itself with respect to the column axis
grid-auto-rowsspecifies the height of rows added implicitly to the grid
grid-auto-columnsspecifies the width of columns added implicitly to the grid
grid-auto-flowspecifies 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!
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