2021年图解CSS Grid备忘单？

Let's refresh Our CSS Grid Memory. Here's a Cheat Sheet of everything you can do with Grid to get started in 2021!?️

让我们刷新一下 CSS Grid 记忆。这是一张速查表，包含 2021 年入门 Grid 所需的一切！？️

YouTube :

Grid Architecture

grid-template-columns

This is used to define the Number & Width of columns. You can either individually set the width of each column, or set an uniform width for all columns using "repeat()" function.

这用于定义 列的数量与宽度。你可以单独设置每一列的宽度，也可以使用 "repeat()" 函数为所有列设置统一宽度。

grid-template-rows

This is used to define the Number & Height of rows. You can either individually set the height of each row, or set an uniform height for all rows using "repeat()" function.

这用于定义行的数量与高度。你可以单独设置每一行的高度，也可以使用 "repeat()" 函数为所有行设置统一高度。

grid-template-areas

This is used to specify the amount of space a grid cell should carry in terms of column & row across the parent container. Life's Quite Easier With this as it allows us to see visually what we're doing.

这用于指定一个网格单元在父容器中应跨越的列与行的空间量。有了它，生活变得相当轻松，因为它让我们可以直观地看到自己在做什么。