在自适应设计中，一种可能难以处理的设计模式是内嵌某些内容的边栏。在有视口空间时，这种模式效果很好，但如果空间是压缩的，这种僵化的布局可能会出现问题。

在网页设计中，一种非常常见的布局是页眉、边栏、正文和页脚布局。

多年来，有许多方法可以解决此布局问题，但使用 CSS 网格不仅相对简单，而且有多种选择。 网格特别适用于将外部大小调整的控制与固有大小调整的灵活性相结合，这使其成为此类布局的理想选择。这是因为网格是专为二维内容设计的布局方法。也就是说，同时按行和列进行布局。

创建网格布局时，您可以定义一个包含行和列的网格。然后，将项放置在该网格上，或允许浏览器将其自动放置在您创建的单元格中。需要添加网格的内容有很多，但掌握可用内容概览后，您很快就可以制作网格布局了。

假设您是一名开发者，一位设计师同事为您提供一个全新网站的设计。该设计具有各种有趣的布局和组合：考虑视口宽度和高度的二维布局，以及需要流动和灵活的布局。如何确定使用 CSS 来设置这些样式的最佳方式？

CSS 为我们提供了各种方法来解决横轴、纵轴或两者上的布局问题。为上下文选择正确的布局方法可能并非易事，并且通常您可能需要多种布局方法才能解决问题。为帮助完成这项工作，在接下来的模块中，您将了解每种 CSS 布局机制的独特功能，并据此做出明智的决策。

布局：简述

在 Web 发展初期，使用 `` 元素进行布局的设计会比简单的文档更加复杂。当 CSS 在 90 年代后期浏览器得到广泛采用后，您就可以更轻松地将 HTML 与视觉样式分离开来。 CSS 让开发者能够在不接触 HTML 的情况下完全改变网站的外观和风格。 这项新功能激发了 The CSS Zen Garden 等项目的灵感，该项目旨在展示 CSS 的强大功能，鼓励更多开发者学习 CSS。