CSS网格布局:简介

来自菜鸟教程
(重定向自CSS网格布局:简介
跳转至:导航、​搜索

Flexbox 很棒,但它的主要目的是帮助我们在一维中定位元素,无论是水平的还是垂直的。 对于整个页面的二维布局,我们主要依赖于 Bootstrap 或 Foundation 等框架来为我们提供可用于创建网格布局的类。 一个新模块,CSS Grid Layout,将很快在浏览器中可用,应该会改变这一切。

让我们通过一个非常简短的概述来探索 CSS Grid。 首先,要记住几个关键点:

  • 与 Flexbox 一样,源顺序与 CSS Grid 无关,并且项目可以根据视口的大小轻松重新定位。
  • 您现在可以开始使用网格布局,并通过 @supports 使用特征检测,这样它只适用于支持的浏览器。
  • 一些即使使用现代 CSS 框架的网格系统也无法完成的布局,现在可以使用 CSS Grid。

词汇

CSS Grid 引入了一些概念,熟悉这些词汇是个好主意:

  • 网格线:项目在网格上以项目开始和结束的线定位,因此网格线是 CSS Grid 工作方式的核心。 列网格线从左到右从 1 开始编号,行网格线从上到下从 1 开始编号。

网格行第 2 行

  • 网格轨迹:两条网格线之间的空间。

网格轨道

  • 网格区域:由任意 4 条网格线定义的区域。

网格区域

  • 网格单元:两个连续的列和行网格线之间的空间。 网格上可能的最小单位。

网格单元

显示:父级上的网格

有点像 flexbox,网格是由一个容器元素和成为网格项的子元素组织的。 您只需在容器元素上设置 display: grid。 网格行和列由 grid-template-columnsgrid-template-rows 定义。

让我们从以下标记开始:

<div class="container">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
  <div class="box box-5">Box 5</div>
  <div class="box box-6">Box 6</div>
  <div class="box box-7">Box 7</div>
</div>

下面是我们如何定义容器的 CSS:

.container {
  display: grid;

  grid-template-columns: 150px 150px 80px;
  grid-template-rows: 100px auto;

  grid-gap: 10px 15px;
}

有了这个,我们已经得到了一些有趣的东西,即使没有在网格项目上设置任何属性:

请注意我们如何使用 grid-gap 在单元格之间添加 10px 水平间隙和 15px 垂直间隙。

现在我们可以通过定义特定项目的开始行和结束行来更进一步。 未明确放置在网格上的项目将根据算法放置。 我们使用 grid-column-start, grid-column-end, grid-row-startgrid-row-end定义项目在网格上的开始和结束位置:

.box-1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

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

或者我们可以使用 grid-columngrid-row 速记来获得相同的结果:

.box-1 {
  grid-column: 1 / 3;
}

.box-3 {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

这是现在生成的网格:

👉 间隙不会添加新的网格线,因此彼此相邻的项目实际上是接触同一条线,即使有间隙将它们分开。

今天的 CSS 网格布局

不幸的是,网格布局仍然不可用。 这是当前的可用性:

  • Firefox 自 52 版起默认支持。
  • 完全支持最新的 Chrome 和 Opera 背后的标志。
  • 在 IE 和 Edge 中受支持,但语法较旧。
  • 在最新的 Safari 技术预览版中可用。

Chrome 应该会在 2017 年 3 月发布 一个默认启用 Grid 的版本。 所以它很快就会到来,2017 年很可能是 CSS Grid 的一年!

在 Chrome 中启用

要在 Chrome 中启用 CSS Grid,请转到 chrome://flags/,查找 Experimental Web Platform features 并启用它。

在 Firefox 中启用

Firefox 52 及更高版本现在支持开箱即用的网格布局。

了解更多

我们保持这篇文章简短而温馨,但是有许多新概念需要使用 CSS Grid 学习,因此我们将其中的许多概念拆分为他们自己的帖子:

进一步阅读

这里有一些很好的资源来学习 CSS Grid 的来龙去脉: