如何使用 CSS Grid Layouts 创建简单的布局

如果你曾经涉足过印刷设计，你就会知道网格布局的想法是从哪里来的。 网格是用于在页面上定位设计元素的精确测量工具。 这个想法经常在网络上用于使内容组织和统一，从而为您的用户提供更好的观看体验。

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

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

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

CSS 网格支持

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

CSS 网格布局基础知识

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

部分网格

线条

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

曲目

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

细胞

在水平和垂直轨道相遇的地方找到单元。 图中有八个单元格。

领域

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

创建网格布局

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

网格的 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>

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

CSS 样式

完成 HTML 标记后，最重要的声明是在 CSS 中完成的。 在容器内，您需要应用display:grid或display:inline-grid 。 如果您想要块级网格，请使用display:grid grid。 使用display:inline-grid用于内联网格。 要了解更多信息，请查看此出色的参考指南。

.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;
}

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

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

事情看起来很紧凑，但是有了更多的规范，事情就会成形。

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

让我们从标题开始，它从第 1 列到第 4 列，从第 1 行到第 2 行。CSS 看起来像这样：

.header {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

你可能会注意到侧边栏被压扁了，我们看不到太多。 我们需要做一些重新安排。 在此布局中，参考线条来获得布局将有助于安排。 线条充当指导方针。 标题位于第一行的行和第二行的行之间。 对于侧边栏，它将从第三行开始，到第六行结束。 标题行以两个结尾，所以这将放在它的正下方。 要查看示例，请参阅 Codepen 上的项目。

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

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

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

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

最后两个内容区域是额外内容区域和页脚。

.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;
}  

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

响应优势

现在已经创建了一个布局，它看起来非常“桌面”。 平板电脑和移动设备呢？ 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;
  }

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

CSS 网格布局的浏览器工具

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

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

本文最初发布于 2016 年 8 月 3 日，最后更新于 2017 年 12 月 6 日。