CSS Grid
当需要设计网站时， CSS Grid对于网页设计很有用。CSS Grid Layout 和 CSS Flexbox Layout 的区别在于，Flexbow有助于创建一维的列和行布局，而Grid 有助于创建二维的列和行布。 这两个特性在很多方面都非常相似，学会一个之后，另一个也能轻松掌握。在这个话题中，我不打算去讨论Flexbox,而是要去谈谈Grid的基础知识。
Grid-template-columns:
在将Grid设置为Grid时，我们需要使用Grid-template-columns来设置列的宽度。我们可以按照百分比或者fr单位（“fraction”）进行设置。在下面的示例中，我将其写为“ grid-template-columns: repeat (4,1fr)”、“ grid-template-columns: 25% 25% 25% 25%”、“ grid-template-columns: auto auto”或“ grid-template-columns: repeat (4,25%)”。
当我们设置 grid-template-columns 时，它允许div 去匹配我们设置的值，不管我们有多少div,都会遵循相同的模式。让我来举个例子：
Grid-gap, Grid-column-gap, and Grid-row-gap:
接下来，我将讨论 Grid Gap，它是行/列之间的空间。我们可以选择使用“ Grid-column-gap”来设置 Grid 列的值，“ Grid-row-gap”来设置 Grid 列的值，或者“ Grid-gap”来设置 Grid 行和列的值。如下图所示：
Align-self:
如果我们需要不同的对齐方式怎么办？我们可以将每个 div 的类设置为 align-self，并将值设置为我们希望的值。在这个例子中，我将box 1的 align-self 设置为start，将box 2的 align-self 设置为center，将box 3的 align-self 设置为end。如下所示:
Grid-column & Grid-row:
当你想要设置位置和大小时，可以使用grid-column和grid-row。例如，我需要在行和列上实现box 1在1的地方开始在3的地方结束。如你所见，五角星代表列，六边形代表行。设置grid-column: 1/3时，表示从五角星1开始，到五角星3结束。当你设置 grid-row: 1/3时，这意味着你从1号六边形开始，到3号六边形结束。
下面是在我设置grid-column和grid-row之前原来的样子:
