如何使用 CSS 网格布局创建简单布局

如果您曾经涉足过印刷设计，您就会知道网格布局的想法起源于何处。 网格是一种精确的测量工具，用于在页面上定位设计元素。 Web 上经常使用此想法来使内容井井有条且统一，从而改善用户的观看体验。

当网页设计的实践是新的时，布局非常简单。 页眉、侧边栏、内容区域和页脚。 现在，随着网络的发展，我们的布局变得更加复杂，作为网页设计师，我们有更多的事情要应对。 我们经常需要大量的内容区域、响应式设计、多页面布局模板设计等等。 为了实现设计并使其正确显示，需要浮动和定位。 浮点数听起来很简单，但有时使用起来会很棘手。

幸运的是，网格提供了一种更简单的方式来设计和显示 Web 内容。 现在是成为一名设计师的好时机，因为 CSS 网格布局正在迅速获得关注。 可能感觉网格是近年来网页设计中的一个新想法，但不管你信不信，CSS 网格布局已经投入使用多年。 浏览器对它们的支持很快就出现了，所以现在它们可以帮助缓解设计师多年来不得不处理的关于定位的一些挫折感。

终于到了进入网格并探索新的设计可能性的时候了！

CSS 网格支持

这完全取决于您需要支持的浏览器，但是很有可能您在使用 CSS 网格时不必担心“标记模式”。 您可以随时访问 Can I Use 文档来仔细检查，但对 CSS 网格的支持已大大增加，许多设计师能够在生产中使用它，这是值得庆祝的！

CSS 网格布局基础

通过使用 CSS，网格布局将有助于定义网页上的内容区域。 CSS 网格布局规范中定义了一组相对较新的属性。 在进一步了解这种新的布局设计方式时，这是一个很好的参考资源。 CSS 网格布局有助于简化事情并使创建布局更容易。 将网格视为可以定义测量值的结构。

网格的一部分

线条

在这种情况下，有 5 条垂直线和 3 条水平线。 行的编号从一开始。 在此示例中，垂直线从左到右显示，但这取决于书写方向。 因为这里显示的是从左到右阅读，如果是从右到左，事情就会颠倒过来。 可以为线条命名（可选），这有助于在 CSS 中引用它们。

曲目

轨道是两条平行线之间的空间。 在图中，有四个垂直轨道和两个水平轨道。 线路和轨道之间存在巨大的双重努力。 线条是参考内容开始和结束位置的好方法。 曲目是内容实际去向的地方。

细胞

单元格位于水平和垂直轨道相交的地方。 图中有八个单元格。

领域

单元格在指定区域时发挥作用。 区域是可以跨越多个单元格的矩形形状。 与线一样，区域可以随意命名。 图中包含几个标签：“A”、“B”和“C”。

创建网格布局

在开始布局之前勾勒出草图会很有帮助。 没有什么可以替代好的旧方格纸。

网格的 HTML

 [html] <div class="container"> <div class="grid header">Header</div> <div class="grid sidebar">Sidebar</div> <div class="grid content">Main Content</div> <div class="grid extra">Extra Content</div> <div class="grid footer">Footer</div> </div> [/html]

容器非常重要。 容器内是网站的不同内容块。 容器内网格项的顺序无关紧要。 接下来，我们将使用 CSS 将它们放置在我们的布局中。

CSS 样式

完成 HTML 标记后，最重要的声明是在 CSS 中完成的。 在容器内，您需要应用display:grid或display:inline-grid 。 如果您想要块级网格，请使用display:grid 。 将display:inline-grid用于行内级网格。

 [css] .container { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 10px; grid-row-gap: 15px; } .grid { background-color: #444; color: #fff; padding: 25px; font-size: 3rem; } [/css]

grid-template-columns和grid-template-rows属性用于指定行和列的宽度。 grid-template-columns已设置为 1fr 和 3fr。 这是用小数单位形成网格的地方。 使用这些值，很明显有两列并且它们的宽度不相等。 设置为 3fr 的列比其他列宽三倍。 这解释了侧边栏如何显得比内容区域更窄。

可以进行响应式自定义，但使用小数单位是很好的第一步。 可以使用grid-column-gamp和grid-row-gap控制区域之间的间距。

事情看起来很紧凑，但如果有更多的规格，事情就会成形。

此示例从放置标题开始，但可以按照最适合您的顺序放置元素。 如果您想从页脚开始，那也可以。

让我们从标题开始，它从第 1 列行到第 4 列行以及第 1 行行到第 2 行行。CSS 将如下所示：

 [css] .header { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } [/css]

您可能会注意到侧边栏被压扁了，我们几乎看不到它。 我们需要做一些重新排列。 在此布局中，参考线条以获取位置将有助于安排。 线条作为指导。 标题位于第一行和第二行之间。 对于侧边栏，它将从第三行开始到第六行结束。 标题行以 2 结尾，因此将放在它的正下方。 要查看示例，请参阅 Codepen 上的项目。

我们使用grid-column-start来指定元素的起始垂直线。 在这种情况下，它将设置为三个。 grid-column-end指示元素的结束垂直线。 在这种情况下，此属性将等于四。 其他行值也将以同样的方式设置。 侧边栏的位置在那里，它只是被内容区域覆盖。

 [css] .sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; background: #a0c263; } [/css]

主要内容从第三栏开始，到第四栏结束。 侧边栏和内容区域的顶部是偶数，因此它们的grid-row-start都是三个。 您可能想知道内容和侧边栏是如何变高的。 通过在容器上设置高度，在本例中为 400px，现在它比其他元素高。

 [css] .content { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: #f5c531; height: 400px; } [/css]

最后两个内容区域是附加内容区域和页脚。

 [css] .extra { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #898989; } .footer { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #FFA500; } [/css]

可以更有效地编写结束和开始声明。 你可能会看到grid-column-start: 1; 和grid-column-end: 3; 用速记写的。 这看起来像grid-column: 1 / 3; . 同样的想法可以用来声明列行信息。

响应优势

现在已经创建了一个布局，它看起来很“桌面”。 平板电脑和移动设备呢？ CSS 网格布局与媒体查询配合得很好，因此设计可以适应不同的屏幕尺寸。 真正酷的是您可以在这些不同的媒体查询断点处更改内容区域。 作为设计师，这意味着您可以在不同的断点处选择最适合您的布局的内容。 例如，如果您希望将“额外内容”放置在“内容”区域上方，您可以指定正确的列和行。

 [css] /* For mobile phones: */ .header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .extra { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } .content { grid-column-start: 1; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6; background: #f5c531; height: 400px; } [/css]

通过让列从 1 开始到 4 结束，我们使内容区域全宽。 网格行的放置使得“额外内容”现在位于“内容”之上。

CSS 网格布局的浏览器工具

当您设计布局或检查其他网站时，Firefox 提供了一个很好的工具来处理 CSS 网格布局。 它被称为 CSS Grid Playground，它使检查网格变得非常直观。 通过转到检查器，布局选项卡中有一个选项可以直观地查看网格的构造方式。 使用此工具探索不同的网格属性如何影响整体网格布局和设计将使设计过程更容易。

CSS 网格布局是一种全新的、令人兴奋的创建 Web 布局的方式。 如您所见，创建简单的页面布局时启动和运行起来非常容易。 这个简单的示例为如何制作更复杂的布局奠定了良好的基础。 随着这项技术的普及，在为各种设备和断点设计时，这项技术将具有优势，可以进行布局定制。