CSS GRID ESSENTIALS

CSS GRID ESSENTIALS
Review
At this point, we've covered a great deal of different ways to manipulate the grid and the items inside it to create interesting layouts.

grid-template-columns defines the number and sizes of the columns of the grid
grid-template-rows defines the number and sizes of the rows of the grid
grid-template is a shorthand for defining both grid-template-columns and grid-template-rows in one line
grid-gap puts blank space between rows and/or columns of the grid
grid-row-start and grid-row-end makes elements span certain rows of the grid
grid-column-start and grid-column-end makes elements span certain columns of the grid
grid-area is a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end, all in one line
You have seen how to set up and fill in a grid and you now have one more CSS positioning technique to add to your toolkit! Let's do some practice to solidify these skills.

原文地址:https://www.cnblogs.com/young-ma/p/7811779.html