CSS-Grid 是一种新的布局方式，能够轻松地实现复杂的布局效果，甚至可以取代传统的 float 和 position 等布局方式。本篇文章将详细介绍 CSS Grid 布局的实例，并解释如何使用其强大的功能创造活力的页面布局。
CSS-Grid 布局
相比于现有的布局方式，CSS-Grid 强大在于其完整的网格布局系统。通过使用 Display：Grid 将元素转换为网格容器，可以获得更加通用和功能强大的布局选项。另外，我们可以通过 Grid-Template 以及 Grid-Area 和 Grid-Column /Row 三种属性来指定布局和定位。
下面展示了一个简单的网格容器实例：
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
}在此代码中，我们创建了一个具有三列三行的 100 像素宽和高的网格容器。由于 grid-gap 属性，在每个网格之间都添加了 10 像素的空隙。接下来，我们将展示几个更有趣和复杂的实例。
示例 1 - 自适应布局
该示例是适用于响应式布局的实例，由于我们使用了网格布局，页面在手机和电脑上的布局效果都非常好。接下来我们考虑这个页面的布局实现。
该示例的 HTML 代码如下：
<div class="container"> <header>Header</header> <nav>Nav</nav> <main>Main</main> <aside>Aside</aside> <footer>Footer</footer> </div>
我们为整个页面创建了一个名为“container”的网格容器，然后我们定义了行和列的模板分别为“auto 100px”，意味着首行高度自动，接下来的所有行都是 100 像素高。列宽度设置为“repeat(4, 1fr)”，意味着我们指定了四列每列的宽度都相等。
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto 100px 1fr auto;
grid-gap: 0px;
}其中，“auto”行的高度将适应其内容，因此这个例子根据内容的不同而适应性很强。接下来，我们通过为每个元素分配其在网格中所占位置的类来完成布局：
-- -------------------- ---- ------- ------ - ------------ - - -- --------- - - -- - --- - ------------ - - -- --------- - - -- - ---- - ------------ - - -- --------- - - -- - ----- - ------------ - - -- --------- - - -- - ------ - ------------ - - -- --------- - - -- -
通过给各个元素指定 grid-column 及 grid-row 属性，元素将根据我们的指定来放置在每个网格中。
示例 2 - 多方向自适应网格
在本示例中，我们将展示如何创建一个带有多方向自适应网格的完全自定义布局。对于此示例，我们将需要使用 CSS Grid 的自适应布局，以及一些基本的 HTML 元素和样式。
该示例中的 HTML 代码如下：
-- -------------------- ---- -------
---- ------------------
-----------------------
----
-------- ------
-------- ------
-------- ------
-----
--------------------------
--------------------
-----------------------
------首先，我们创建了包含几个名称的元素的网格容器，并将其转换为网格网格容器。此示例中，我们将模板中的每个单元格设置为“1fr”，这意味着网格容器将根据内容自动调整大小。
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto auto;
}然后，我们指定了一些有用的参数来控制每个元素相对于其他元素的位置：
-- -------------------- ---- ------- ------ - ----------------- ----- - -- - -------- ----- ---------------------- ---------------- ------------- ------ --------- ----- ----------- ----- -------- -- ------- -- - -- - ----------------- ----- -------- ----- - ------- - ----------------- ----- -------- ----- - ----- - ----------------- ----- -------- ----- - ------ - ----------------- ----- -
在上述代码中，我们将以“header”为例来展示，其他元素与“header”的位置分配也可以完全相同。在该示例中，“header”的位置被我们指定在第一个单元格，而“ul”元素的列和行和跨度被设置成“4 / span 2”以使其在第四个单元格中完全居中。
-- -------------------- ---- ------- ------ - ------------ - - ---- -- --------- - - ---- -- - -- - ------------ - - ---- -- --------- - - ---- -- - ------- - ------------ - - ---- -- --------- - - ---- -- - ----- - ------------ - - ---- -- --------- - - ---- -- - ------ - ------------ - - ---- -- --------- - - ---- -- -
总结
本文我们为大家介绍了 CSS-Grid 布局的概念、用法和示例，如何实现页面排版中的自适应、多方向布局等布局需求。通过学习 Grid 布局系统，我们能够从根本上大幅提高前端页面的设计效率，同时也提高我们的页面布局能力和创造力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ae048968c7c53b067ebbd