宏布局描述的是界面的较大组织结构，即页面范围内的组织结构。
在应用任何布局之前，您应确保内容的流向合理。 这种单列默认排序方式适用于较小的屏幕。
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
当您排列这些单独的页面级组件时，您就是在设计宏布局：页面的高级视图。 您可以使用媒体查询在 CSS 中提供规则，描述此视图应如何适应不同的屏幕尺寸。
网格
CSS 网格是为页面应用布局的出色工具。 在前面的示例中，假设您希望在有足够的屏幕宽度可用时采用双列布局。 如需在浏览器宽度足够时应用此双列布局，请使用媒体查询在指定断点上方定义网格样式。
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Flexbox
对于此特定布局，您还可以使用 Flexbox。 样式如下所示：
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
不过，Flexbox 版本需要更多 CSS。 每个列都有一个单独的规则来描述它应占用多少空间。 在网格示例中，相同的信息封装在包含元素的一个规则中。
您需要媒体查询吗？
您可能并不总是需要使用媒体查询。 当您对几个元素应用更改时，媒体查询可以正常工作，但如果布局需要大量更新，您的媒体查询可能会因包含大量断点而变得难以管理。
假设您有一个页面，其中包含大量卡片组件。
卡片的宽度永远不会超过 15em，并且您希望在一行中放置尽可能多的卡片。
您可以编写包含 30em、45em 和 60em 等断点的媒体查询，但这非常繁琐且难以维护。
您可以改为应用规则，以便卡片本身自动占用适当的空间。
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
您可以使用 Flexbox 实现类似的布局。 在这种情况下，如果卡片数量不足以填充最后一行，剩余的卡片将拉伸以填充可用空间，而不是按列排列。 如果您想按行和列排列，请使用网格。
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
通过在 Flexbox 或网格中应用一些智能规则，您可以使用最少的 CSS 设计动态宏布局，而无需任何媒体查询。 这样可以减少您的工作量，因为您让浏览器来执行计算。 如需查看一些无需媒体查询即可实现流畅效果的现代 CSS 布局示例，请参阅 1linelayouts.com。
检查掌握情况
测试您对宏布局的了解程度。
以下哪个句子最能描述宏布局？
宏布局是否总是使用媒体查询来适应不同的屏幕尺寸？
现在您已经了解了一些页面级宏布局，接下来请关注页面中的组件。这是微布局的领域。