利用 CSS 网格布局实现常用布局

许多网站都是这种布局的变体，有内容、边栏、页眉和页脚。在响应式设计中，您可能希望将布局显示为单个列，在某个断点添加侧栏，然后为更宽的屏幕引入三列布局。

我将使用我们在向导网格模板区域中了解到的命名模板区域来创建这个布局。

我的标记是一个容器，其中包含用于标题、页脚、主要内容、导航、边栏和打算放置广告的块的元素。

因为我们使用grid-template-areas来创建布局。在任何媒体查询之外，我需要命名区域。我们使用grid-area 属性命名区域。

这不会创建任何布局，但是我们的项目现在有了名称，我们可以使用它来创建布局。在任何媒体查询之外，我现在要为移动宽度设置布局。在这里，我保持源文件的顺序，试图避免源文件和显示之间的任何断开，就像向导网格布局和无障碍中描述的那样。我没有定义任何列或行跟踪，但是这种布局规定了单个列，并且将根据需要为隐式网格中的每个项目创建行。

在设置了移动布局之后，我们将获得所有屏幕大小的这一列，现在我们可以添加一个媒体查询并重新定义布局，以满足屏幕空间足够显示两列的情况。

您可以看到布局在grid-template-areas的值中成形。 header 跨越两个列轨道，就像 nav 一样。在第三行轨道中，我们在 content 旁边有 sidebar 。在第四行轨道，我选择了放置我的广告内容 - 所以它出现在侧边栏下，然后 footer 旁边的内容。我在导航栏上使用了一个 flexbox 来显示它。

现在我可以添加最后一个断点来移动到三列布局。

三列布局有两个 1fr 单元侧列和一个中间列，轨道大小为 4fr。这意味着容器中的可用空间被划分为 6 个部分，并按照我们的三个轨道的比例分配—每个轨道的一个部分位于侧列，四个部分位于中心。

在这个布局中，我在左边的列中显示导航，旁边是内容。在右边栏我们有侧边栏，在它下面是广告。页脚现在横跨布局的底部。然后我使用一个 flex xbox 将导航显示为一个列。

这是一个简单的示例，但是演示了如何使用网格布局来为不同的断点重新安排布局。具体来说，我正在更改广告块的位置，这在不同的列设置中是合适的。我发现这种命名区域的方法在原型制作阶段非常有用，很容易处理元素的位置。您可以始终以这种方式开始使用 grid 进行原型设计，即使由于访问您站点的浏览器的原因，您不能在生产中完全依赖它。