CSS 网格布局（Grid Layout）

CSS 有几个常用于解决布局问题的属性：如（浮动、定位位置）。这些黑客方法常常会留下一些问题。

Flexbox是一个非常好的布局工具，而Grid Layout CSS Grid Layout是最新的、更强大的布局方式。本文将简单介绍一下什么是网格布局。

网格布局（CSS网格布局）

网格布局是一个二维布局系统。相比过去常用的布局方式，它彻底改变了我们设计UI的方式。

你需要了解的术语

Grid Container（网格容器）、Grid Item（网格容器子元素）。

网格线（网格线），网格单元（网格单元）。

网格轨道（Grid Track）、网格区域（网格线分隔的区域）。

图例参考

页面结构

<div class="container">
    <div class="item item_a">item_a</div>
    <div class="item item_b">item_b</div>
    <div class="item item_c">item_c</div>
</div>

定义网格布局容器

.container {
    display: grid;
}

网格行和列

.container {
    display: grid;
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 100px [row1-end] 100px [third-line] 100px [last-line];
}

通过上述方式，声明了一个3行5列的网格容器。

设置元素在网格容器中的位置

.item_a {
    grid-column-start: 4;
    grid-column-end: five;
    grid-row-start: row1-start;
    grid-row-end: 2;

    background-color: orange;
}
.item_b {
    grid-column-start: 1;
    grid-column-end: span col4-start;
    grid-row-start: 3;
    grid-row-end: span 2;

    background-color: aqua;
}
.item_c {
    grid-column-start: 2;
    grid-column-end: span 1;
    grid-row-start: 2;
    grid-row-end: span 1;

    background-color: rgb(149, 255, 0);
}

结果图：

可以看到对应的元素已经设置在网格的位置了。想象一下如果没有网格布局，您将如何实现此布局？

此时你可能仍然对网格布局感到困惑，但好消息是我得到了一张作弊图。大家可以按照图示自己练习一下（这个技能要努力练习）：