Grid 布局
网格是水平和垂直线段的集合，它们创建了一个模式，我们可以根据该模式来排列元素，使我们的元素不会在页面之间跳动或改变宽度，从而在我们的网站上提供更大的一致性。
在确定了设计所需的网格后，我们可以使用 CSS 网格布局来创建它。CSS 网格布局是 Web 的一个二维布局系统。它允许您将内容组织成行和列，并提供许多功能来简化复杂布局的创建。
基础概念
要将容器元素定义为网格，我们可以使用 display: grid grid-template-columns 和 grid-template-rows 设置列大小和行大小，然后使用 grid-column 和 grid-row 将其子元素放入网格中。
与 Flexbox 类似，网格项的源顺序无关紧要。您的 CSS 可以按任何顺序放置它们，这使得使用媒体查询重新排列网格变得非常容易。
想象一下，定义整个页面的布局，然后完全重新排列它以适应不同的屏幕宽度，所有这些都只需要几行 CSS。Grid 是有史以来最强大的 CSS 模块之一。