Grid布局基础知识与相关案例

一、认识Grid属性

1.Grid容器属性：

属性	说明
grid-template-columns	轨道列宽
grid-template-rows	轨道行高
gap	轨道间距
grid-auto-columns	隐式轨道的列宽
grid-auto-rows	隐式轨道的行高
grid-auto-flow	隐式轨道排列方式，默认行优先

1.认识网格容器/网格项目/网格轨道/轨道间距

首先我们写出一个html结构，声明它的样式为网格布局：display:grid;

<div class="container">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>

效果图：

由此可见，之前的span元素为行内元素，在声明了网格布局之后，全部变为了块元素。
与之前的flex布局不一样，flex布局是行内元素。

以下是创建了一个2行3列的布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格容器/网格项目/网格轨道/轨道间距</title>
    <style>
        /* 网格容器 */
        .container {
            border: 1px solid #000;
            padding: 0.5em;
            /* flex中子元素默认为inline元素，grid中子元素默认为block元素 */
            /* display: grid; */
            /* 1.设置轨道的列宽 */
            /* 设置一个3列2行的布局空间 */
            grid-template-columns: auto;
            grid-template-columns: 10em 10em auto;
            /* 2.设置轨道的行高 */
            /* grid-template-rows: auto; */
            grid-template-rows: 5em 5em;
            /* 3.设置轨道的间距 */
            /* gap: 0.5em 0.5em; */
            /* 如果值相同可以简写 */
            gap: 0.5em;
        }
        /* 网格项目：网格容器中的“子元素”，与flex是一样的 */
        .container > .item {
            /* 默认生成一列N行的容器（N就是项目的数量） */
            background-color: lightcyan;
            border: 1px solid #000;
            padding: 0.5em;
        }
        /* 总结：
        1.网格容器：由若干个矩形网格单元构成
        2.网络项目：网格容器的子元素，必须放在网格单元中
        3.网格单元：有“单元格”和网格区域两种表现形式
        4.网格轨道：由多个网格单元组成，根据排列方向有“行轨”和“列轨”之分
        5.轨道间距： */
    </style>
</head>
<body>
    <div class="container">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
    </div>
</body>
</html>

效果图：

通过上述案例我可以学习到网格布局的相关属性用法：

使用display: grid;声明一个网格布局，其中.container称为网格容器，其子元素span称为网格项目。
设置轨道的列宽：grid-template-columns：10em 10em auto，意思是声明了一个三列的网格布局，auto表示剩下的布局自适应。
设置轨道的行高：grid-template-rows：5em 5em，意思是声明了一个两行的网格布局，高度都是5em
设置轨道的间距：gap: 0.5em 0.5em，声明了轨道之间的间距，可以简写成gap:0.5em。
网格项目：网格容器中的“子元素”，与flex是一样的，默认生成一列N行的容器（N就是项目的数量）。

总结：

网格容器：由若干个矩形网格单元构成；
网络项目：网格容器的子元素，必须放在网格单元中；
网格单元：有“单元格”和“网格区域”两种表现形式；
网格轨道：由多个网格单元组成，根据排列方向有“行轨”和“列轨”之分；
轨道间距：容器中轨道之间的间距,有”行轨间距”,”列轨间距”。

2.自定义项目属性：

grid-area语法：grid-row-start / grid-column-start / grid-row-end / grid-column-end;

编号从左上角开始（1,1）并且是递增的

相关属性说明

属性	说明
grid-row-start	项目的起始行
grid-column-start	项目的起始列
grid-row-end	项目的结束行
grid-column-end	项目的结束列

2.自定义项目在容器中的显示位置

首先，还是先创建一个网格布局的html结构：

<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
    <div class="item">item7</div>
    <div class="item">item8</div>
    <div class="item">item9</div>
</div>

给出以下样式：

<style>
.container {
    border: 1px solid #000;
    padding: 0.5em;
    display: grid;
    /* 轨道列宽 */
    grid-template-columns: repeat(3, 1fr);
    /* 轨道行高 */
    grid-template-rows: 5em 5em;
    /* 行优先时要设置隐式轨道的行高 */
    grid-auto-rows: 5em;
    /* 轨道间距 */
    gap: 0.5em 1em;
}
.container > .item {
    background-color: lightcyan;
    border: 1px solid #000;
    padding: 0.5em;
}
</style>

效果图：

现在我们以第5个项目来举例，将它移动到第一个网格单元中：

<style>
.container .item:nth-of-type(5) {
    background-color: lightyellow;
    /* item5的默认位置 */
    grid-area: 2 / 2 / 3 / 3;
    /* 将它放入到第一个网格单元中 */
    grid-area: 1 / 1 / 2 / 2;
}
</style>

由于默认项目是跨越一行一列的，所以可以简写成下面的格式：

grid-area: 1 / 2;

效果图：

但是，如果是跨越1行1列以上的，就不能省略了。例如要跨越2行3列，就必须写成下面的格式：

grid-area: 1 / 1 / 3 / 4;

通常的情况是我们只关心跨越几行几列，并不关心它的结束行号，所以还可以这样写：

grid-area: 1 / 1 / span 2 / span 3;

所以，上述两种写法的效果是一样的。

效果图：

再以第1个项目为例，有如下样式：

<style>
    /* 添加一个浅绿色背景便于区分 */
    background-color: lightgreen;
    /* 默认位置 */
    grid-area: 1 / 1 / 2 / 2;
</style>

效果图：

如果现在要跨1行3列，可以写成如下格式：

grid-area: 1 / 1 / span 1 / span 3;

因为item1默认的位置是1 / 1，所以上述样式可以简写成：

grid-area: span 1 / span 3;

之前说过，项目默认的是跨1行1列，所以，可以简写成如下格式：

grid-area: auto / span 3;

由以上案例可以得出结论：

grid-area：参数数量不同，意义不同

1. 值中只有span

单值：跨的行数。
双值：跨的行与列数，如果只想设置列数，就必须设置行数（auto—）。

2. 值中有span和编号

双值：没有span，默认跨1行1列，grid-area： 2 / 3；
2.2 三值：省了列结束编号或跨的数量，此时前面的值可使用auto；
2.3 四值：最完整的语法。

3.网格单元尺寸的新单位：fr
设置轨道宽度时可以用一个新单位:fr(fraction)，类似于flex中的伸缩因子

现有如下网格布局：

<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
</div>

给出如下样式：

<style>
.container {
    border: 1px solid #000;
    padding: 0.5em;
    display: grid;
    /* 轨道列宽 */
    grid-template-columns: 10em 10em 10em;
    /* 轨道行高 */
    grid-template-rows: 5em 5em;
    /* 轨道间距 */
    gap: 0.5em;
}
</style>

效果图：

此时我们可以在设置轨道宽度的时候是用一个新单位：fr（fraction），类似于flex的伸缩因子

grid-template-columns: auto auto auto;

效果图：

以上属性设置了一个自适应的3列等宽的布局，如果现在出现一个新的需求，中间一列的宽度是两边的二倍，那么auto就无法满足了，但是fr可以完美解决这个问题：

grid-template-columns: 1fr 2fr 1fr;

效果图：
总结：

% 与 fr可以共存，计算方式：总宽度减去百分比宽度，剩下的宽度都分给fr；
px是固定的，em也是固定的，计算时要减去这些固定值，将剩下的空间都分给fr；
auto，fr，% 都是相对单位，都可以触发自动计算机制，尽可能不要同时出现；
auto 与 px，em同时使用会自动计算。

4.网格单元尺寸的常用函数：repeat(),minmax()

还是跟上面案例一样的初始样式，现在如果我要设置一个3列10em宽度的布局，可以利用repeat()函数这样写：

grid-template-columns: repeat(3, 10em);

等价于下面的写法：

grid-template-columns: 10em 10em 10em;

repeat()的第二个参数可以是多个值

grid-template-columns: repeat(3, 10em 2em);

等价于下面的写法：

grid-template-columns: 10em 2em 10em 2em 10em 2em;

repeat()函数还可以与fr混合使用：

grid-template-columns: repeat(2, 1fr) 2fr;

等价于下面的写法：

grid-template-columns: 1fr 1fr 2fr;

3.minmax()函数

中间列，最小宽度是20em，最大宽度是左右的2倍

grid-template-columns: 1fr minmax(20em, 2fr) 1fr;

效果图：

grid-template-columns: 20em minmax(20em, 1fr);

效果图：

1fr minmax(20em, 2fr) 1fr

当使用1fr时，auto效果也一样，即使写成5fr也是可以的。

grid-template-columns: 20em minmax(20em, 1fr);

grid-template-columns: 20em minmax(20em, 5fr);

grid-template-columns: 20em minmax(20em, auto);

以上三种写法效果完全一样。

效果图：

auto

5.网格单元的排列方式与隐式轨道

现有如下的html结构和样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格单元的排列方式与隐式轨道</title>
    <style>
        /* 网格容器 */
        .container {
            border: 1px solid #000;
            padding: 0.5em;
            display: grid;
            /* 轨道列宽 */
            grid-template-columns: repeat(3, 1fr);
            /* 轨道行高 */
            grid-template-rows: 5em 5em;
            /* 轨道间距 */
            gap: 0.5em 1em;
        }
        .container > .item {
            background-color: lightcyan;
            border: 1px solid #000;
            padding: 0.5em;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
    </div>
</body>
</html>

效果图：

此时声明的网格单元数量已经不够存放网格项目了，多出的三个项目会自动放入到自动生成的网格空间中了,这时，原来声明的网格单元叫做：显示轨道，新项目显示的轨道称为：隐式轨道。

此时，默认项目在容器中按照先行后列的顺序排列，即：“行优先”。

grid-auto-flow: row;

自动生成的隐式轨道的高度是自动的，因此，行优先时要设置隐式轨道的行高。

grid-auto-rows: 5em;

效果图：

隐式轨道，行优先

列优先时，需要设置隐式轨道的列宽：

grid-auto-flow: column;
grid-auto-columns: 1fr;

效果图：

Grid布局基础知识与相关案例

Grid布局基础知识与相关案例

一、认识Grid属性

1.认识网格容器/网格项目/网格轨道/轨道间距

2.自定义项目在容器中的显示位置

1. 值中只有span

2. 值中有span和编号

3.minmax()函数

相关文章