CSS网格简介

css网格已经成为近年来web设计开发的一个重要内容。所有这些兴奋的原因很简单，css网格看起来可能会改变我们创建网格布局的方式，这是件大事儿。

如果你想了解更多关于css网格是什么，它做什么，你就来对地方了。我们提供一个您需要知道概要，以及一些帮助您入门的有用资源。

首先第一件事

我们需要注意的一点是，截至发稿，css网格仍然是一个按照w3c的进度进行工作。这意味着该规范的最终版本还没有完全发布。总的来说，浏览器支持有点不稳定。但随着最终规范的出台，这种情况肯定会改变。

也就是说，自学习新技术的时候，走在曲线前面从来不是一个坏主意。请记住，现在和官方发布之间可能会发生一些变化。有了这个合理的警告，让我们深入了解一下web设计中的这个重要的开发。

在平面布局

css网格是一个允许构建二维网格布局的系统。虽然二维听起来不那么具有开创性，但它绝对是在这个特殊的情况下。可以看到，css玩个允许你按照列和行来管理布局。

相比孩子下，Flexbos实际上只是用于列（如果你愿意的话就是一维）。使用css网格，设计师将能够实现以前完全苦难的布局。事实上，从表格布局的时代起，有些东西就在我们的愿望清单上了。

对于表，使用rowspan属性可以很容易地让一个列占用多个行。CSS没有一个直接的等价。这导致使用多个嵌套容器、浮动、clearfix等来达到预期的效果。这正是CSS网格旨在解决的问题。

好消息是，如果你对Flexbox很熟悉，那么你将会从CSS网格中获得一个好的开始。通过使用Flexbox和CSS网格，可以通过父容器和后续项目(子)来设置这些内容。和Flexbox一样，内容顺序也可以通过CSS设置。这在调整移动设备的内容时特别好。首先在桌面网格上显示的东西可能会在较小屏幕上的显示顺序下被压低。

一个简单的css网格示例

让我们看看一个非常基本的css网格布局。有三列和两行，第三列是唯一的，它跨越两行，并将显示在布局的右侧。

实际上很少的代码就能实现。看看吧：

CSS:

关于css的一些注释：

在 .container, 注意我们有呢能力定义列的宽度和行的高度。我们还可以使用方括号来单独命名列和行：[name]

.grid-cell-5有几个有趣的属性。.grid-column:3 告诉浏览器启动此项作为第三列。与此同时，grid-row:1/3 表示单元格从第一行生成，直到（不存在）的第三行开始。

HTML:

在没有css网格情况下进行这种布局将更具挑战性。当然，还有一些更复杂的布局可以实现。但希望这能说明一些基本的设计是多么容易。