什么是 CSS Grid？
在 CSS 中，网页的排版布局一直都是前端开发者们需要面对的难题之一。传统的布局方法使用了很多的 hack，例如如何让一个元素跟随着另一个元素而移动，以及如何让元素在屏幕上自适应具有不同的宽度，等等。
然而，自从 CSS Grid 网格布局模块正式成为标准后，这一切变得非常简单。CSS Grid 是一个强大的布局工具，它可以让开发者更加方便地控制和布局页面中的元素。借助于它，我们可以很容易创建根据设备尺寸自动缩放且具有不同布局的网格系统。
以下是一些关于 CSS Grid 的优点：
- 可以通过 CSS Grid 完全控制网格系统；
- 可以让网格的动态变化得到更好的呈现；
- 可以让网格布局产生更简单、更方便的代码结构；
- 可以通过使用相对宽度单位来删除断点，从而实现更好的屏幕自适应性；
- 可以提供强大的对齐和调整网格布局的工具。
CSS Grid 的基本使用
使用 CSS Grid 布局，我们需要为父元素（通常是网站的主体容器）定义一个 .grid-container 或 .grid 这样的类，然后在这个类里面定义网格或找准需要创建的网格所在位置的元素。
我们通过下面的示例来演示这一点：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ---- ---- ----- --------- ----- - --------------- - --- - ----------------- -------- -------- ----- ---------- ----- ----------- ------- -
在上面这个示例中，我们用 .grid-container 类来包含一个有 9 个网格项的网格系统。列的宽度使用了 auto auto auto 语法，其中 auto 表示宽度具有相同的值，且自动适应其它视口元素。它们之间使用 grid-gap 属性来定义间隔。
接下来，我们在将它们应用到 HTML 元素的时候，可以很容易的进行修改：
-- -------------------- ---- ------- ---- ----------------------- ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------
在 CSS Grid 中，我们也可以使用其他的方法来定义网格布局。例如，我们可以使用下面的语法将网格扩展到网页的侧面形成一个侧边栏：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --- ----- ---- ----- - --------------- - --- - ----------------- -------- ------- --- ----- ------ ----------- ------- ---------- ----- -
CSS Grid 中的网格行
CSS Grid 可以使用像网格行一样来定义行高。我们可以使用 grid-template-rows 属性来设置行的数目和初试高度值。
为了演示这一点，可以使用下面的代码：
-- -------------------- ---- ------- ---------------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ------- ---- ----- - ---------------- - --- - ----------------- -------- ----------- ------- ---------- ----- -
这里我们使用了 repeat() 函数，让CSS重复9个网格块。并且使用 grid-template-rows 属性来定义了三行高度值为 100px 的实心色正方形。
CSS Grid 中的子元素排序
在 CSS Grid 中，我们可以使用 grid-row 和 grid-column 属性来确定一个元素在网格中所占的位置。我们可以通过设置这些属性，让一些元素覆盖其他元素，实现定制布局。
让我们来看一下下面的例子：
-- -------------------- ---- ------- ---------------- - -------- ----- ---------------------- --------- ------- ------------------- --------- ------- ---- ----- - ------ - --------- -- ------------ -- ----------------- -------- - ------ - --------- - - -- ------------ - - -- ----------------- -------- - ------ - --------- -- ------------ -- ----------------- -------- - ------ - --------- -- ------------ -- ----------------- -------- - ------ - --------- -- ------------ -- ----------------- -------- - ------ - --------- - - -- ------------ -- ----------------- -------- - ------ - --------- -- ------------ -- ----------------- -------- - ------ - --------- -- ------------ -- ----------------- -------- - ------ - --------- -- ------------ -- ----------------- -------- - ------- - --------- - - -- ------------ -- ----------------- -------- - ---------------- - --- - ----------- ------- ---------- ----- ------ ------ -------- ----- -
上面的样例演示了如何在一个网格布局中使用 grid-row 和 grid-column 属性进行元素的排序。在这个例子中，我们使用了 10 个正方形的网格块，每个块的大小为 100 x 100。借助于上面的代码，我们能够看到 3 列 4 行的网格布局。
总结
CSS Grid 是一种大大优化网页布局管理的方法，它比传统的布局方法更简洁、更灵活。使用 CSS Grid，我们能够保存许多模板和样式表因为我们可以在一个样式表中定义多种不同的网格布局。
如果你不熟悉 CSS Grid 的使用，那么以上的介绍就可以让你掌握一些基本的方法和语法了。当然，还有很多其他的方法，例如使用 grid-row-gap 和 grid-column-gap 属性来指定行和列之间的空白区域，以及使用 grid-auto-rows 和 grid-auto-columns 属性来定义没有被明确定义的网格面积的大小。现在，请开始使用 CSS Grid 来创建你的网页布局吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455e757968c7c53b094150d