CSS网格布局

前言

这里是本人学习时简单记录的笔记，可供参考，学习GRID网格请直接查看MDN原文链接.

网格系统真强大！！！强大的东西，学起来也激动，轻松实现强大的布局

---

CSS Grid Layout是用于Web的二维布局系统。 它使您可以按行和列对内容进行布局，并具有许多使构建复杂布局简单明了的功能。 本文将为您提供开始布局页面所需的全部知识。

什么是网格布局？

网格是水平线和垂直线的集合，创建了一个图案，我们可以在该图案上排列我们的设计元素。 它们可以帮助我们创建设计，使元素在页面之间移动时不会跳动或改变宽度，从而提高了网站的一致性。

网格通常具有列，行，然后在每一行与列之间留有空隙（通常称为装订线）。

创建你的第一个网格系统

确定了设计所需的网格后，可以使用CSS Grid Layout在CSS中创建该网格并将项目放置到该网格上。 我们将首先查看Grid Layout的基本功能，然后探讨如何为您的项目创建简单的网格系统。

定义一个网格

使用网格之前：

要定义网格grid，我们使用display属性的网格值grid。 与Flexbox一样，这会打开“网格布局”，并且容器的所有直接子级都将成为网格项。 将此添加到文件内的CSS中：

        .container {
            display: grid;
        }

与flexbox不同，这些网格项目不会立即看起来有所不同。 声明display：grid网格会为您提供一列网格，因此您的项目将像在正常流程中一样继续在另一个项目下方显示。

要查看看起来更像网格的内容，我们需要在网格中添加一些列,让我们在这里添加三个200像素的列。 您可以使用任何长度单位或百分比来创建这些列，效果如下面所示，每一列都是200px的宽度

        .container {
            display: grid;
            grid-template-columns: 200px 200px 200px;
        }

固定宽度网格项目效果分析：

固定网格项目宽度或许不会铺满网格盒子
固定网格项目的高度撑开了就是网格盒子的高度

带有fr单元的柔性网格

除了使用长度和百分比创建网格外，我们还可以使用fr单位灵活调整网格行和列的大小。 该单位代表网格容器中可用空间的一小部分。

柔性网格按照比例排列网格:

将您的tracks轨道列表更改为以下定义，创建三个1fr tracks。(这里的tracks用词非常准确，一条轨道分成多个部分)

        .container {
            display: grid;
            border: 1px solid red;
            /*grid-template-columns: 200px 200px 200px;*/
            grid-template-columns: 1fr 1fr 1fr;
        }

柔性网格项目效果分析：

柔性网格会自动按照比例铺满网格盒子
网格项目的高度撑开了网格盒子的高度
该网格比例是1：1：1

现在，您应该看到自己拥有灵活的轨道。 fr单位按比例分配空间，因此您可以给tracks赋予不同的正值，例如，如果您像这样更改定义：

            display: grid;
            border: 1px solid red;
            /*grid-template-columns: 200px 200px 200px;*/
            grid-template-columns: 2fr 1fr 1fr;

柔性网格项目效果分析：

该柔性网格系统的列比例是：2：1：1

设置网格之间的间隙

为了在轨道之间创建间隙，我们使用属性grid-column-gap来设置列之间的间隙，使用grid-row-gap来设置行之间的间隙，并使用grid-gap来同时设置两者。

这些间隙可以是任何长度单位或百分比，但不能是fr单位。

重复单个轨道

重复轨道写法与按比例实现相同的效果，写法更为简单
您现在将像以前一样获得3个1fr曲目。 传递给repeat函数的第一个值是您希望列表重复的次数，而第二个值是曲目列表，可以是您想要重复的一个或多个曲目。

        .container {
            display: grid;
            border: 1px solid red;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 20px;
        }

==

        .container {
            display: grid;
            border: 1px solid red;
            /*grid-template-columns: repeat(3, 1fr);*/
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap: 20px;
        }

重复多个轨道

        .container {
            display: grid;
            border: 1px solid red;
            grid-template-columns: repeat(3, 1fr 2fr);
            /*grid-template-columns: 1fr 1fr 1fr;*/
            grid-gap: 20px;
        }

效果分析:

重复多个轨道是将轨道进行两次划分，假设第一次划分为x个，那么第二次划分为y个，总的轨道个数就是x*y个，样式也进行了重复

隐式网格

默认情况下，在隐式网格中创建的轨道是自动调整大小的，这通常意味着它们足够大以适合其内容。 如果希望给隐式网格轨迹指定大小，则可以使用grid-auto-rows和grid-auto-columns属性。 如果向CSS添加值为100px的grid-auto-rows，您将看到这些创建的行现在高100像素

        .container {
            display: grid;
            border: 1px solid red;
            grid-template-columns: repeat(3, 1fr);
            /*grid-template-columns: 1fr 1fr 1fr;*/
            grid-gap: 20px;
            /*设置网格的高度，如果内容放不下会导致溢出*/
            /*grid-auto-rows: 100px;*/
            
        }

如果我们向高于100像素的轨道中添加内容，则100像素高的轨道将不会非常有用，在这种情况下，这会导致溢出：

使用minmax（）函数，我们可以为轨道设置最小值和最大值，例如minmax（100px，auto）。 最小尺寸为100像素，但最大为自动，它将自动扩展以适合内容。 尝试更改grid-auto-rows以使用minmax值（最大值自动的设置避免了内容溢出）：

尽可能多的以某一个宽度平铺

有时，能够要求网格创建适合容器的列数会很有帮助。 我们通过使用repeat（）表示法设置grid-template-columns的值来做到这一点，但不要传入数字，而是传入关键字auto-fill。 对于函数的第二个参数，我们使用minmax（），其最小值等于我们想要的最小轨道大小，最大值为1fr。

之所以行之有效，是因为网格正在创建200个像素的尽可能多的列，然后将其容纳到容器中，然后在所有列之间共享剩余的空间-最大值为1fr，我们已经知道，它在轨道之间平均分配空间。

网格线

没有使用网格布局之前:

我们将使用网格线将网站的所有元素放置在网格上。 将以下规则添加到CSS的底部：
使用网格线之后效果非常好看:

grid-template-areas属性，以及网格框架可以实现类似的效果…（略）