css grid布局属性详解

前言

网格布局（Grid）是最强大的 CSS 布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

CSS Grid布局提供了更直观的网格化布局方式，使得响应式设计和复杂页面结构的实现更加简单和高效。

Flex 布局是轴线布局，可以看作是一维布局。
Grid 布局则是将容器划分成行和列，产生单元格，可以看作是二维布局。
Grid 布局远比 Flex 布局强大。

一、认识Grid

实现一个九宫格布局
css代码

        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        body{
            padding: 2%;
        } 
        li{
            text-align: center;
            padding: 10px;
        }

        li:nth-child(1) {
            background-color: red;
        }

        li:nth-child(2) {
            background-color: blue;
        }

        li:nth-child(3) {
            background-color: green;
        }

        li:nth-child(4) {
            background-color: yellow;
        }

        li:nth-child(5) {
            background-color: pink;
        }

        li:nth-child(6) {
            background-color: purple;
        }

        li:nth-child(7) {
            background-color: orange;
        }

        li:nth-child(8) {
            background-color: aqua;
        }

        li:nth-child(9) {
            background-color: gray;
        }

html代码

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>

效果图

ul的css代码

        ul {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
        }

效果图

1.1容器和项目

上面例子中ul就是容器，里面的li就是项目
注意：项目只能是容器的顶层子元素，不包含项目的子元素。

1.2行和列

水平为行(row)，垂直的为列(column)
上面例子中123就是行，147就是列

1.3单元格和网格线

行和列的交叉区域，称为"单元格"（cell）。
正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

二、容器属性

使布局变为网格布局
display: gird：块级元素。
display: inline-grid：行内元素。

2.1.grid-template-columns与grid-template-rows属性

grid-template-columns属性定义每一列的列宽，
grid-template-rows属性定义每一行的行高。

2.1.1 直接使用长度单位比如px

        ul {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 60px 60px 60px;
        }

上面表示一个三行三列的网格，列宽为100px,行高为60px。

2.1.2 使用百分比 %

        ul {
            display: grid;
            grid-template-columns: 33.33% 33.33% 33.33%;
            grid-template-rows: 33.33% 33.33% 33.33%;
        }

2.1.3 使用repeat函数

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。
比如上面的%可以简写为repeat(3, 33.33%)，意思表示分三行，每一行占33.3%

repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
repeat()重复某种模式也是可以的。
repeat(2, 160px 40px 100px) 表示一行占160px,第二行占40px，第三行占100px，并且重复两次，也就是分6行

        ul {
            display: grid;
            grid-template-columns: repeat(2, 160px 40px 100px);
        }

2.1.4 按比例划分 fr 关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。
如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍，1fr 2fr表示总共分了3分，前者占1/3后者占2/3。
使用过三方ui库的比如Bootstrap,应该清楚网格布局(Layout )是按24等份来划分的，这里可以看做第一列划分了8等份，第二列划分了16等份。

fr也可以与绝对长度的单位结合使用，

        ul {
            display: grid;
            grid-template-columns: 150px 1fr 2fr;
        }

看到这里是不是想到了什么？没错那就是三栏布局，左右固定，中间自适应可以直接这样写grid-template-columns: 150px 1fr 150px;

2.1.5 自动填充 auto 关键字

auto 表示由浏览器自己决定长度。

        ul {
            display: grid;
            grid-template-columns: auto 1fr 2fr;
        }

上面例子中第一列的宽度由其内容决定，第二、三列则占据剩余的空间

与fr的区别
fr 适用于分配剩余空间，不受内容大小限制。
auto 适用于内容驱动的大小调整，通常用于使列或行根据内容的实际需要调整其大小。

auto-fill属性：只能应用在repeat函数中的第一个参数， 比如repeat(auto-fill, 30%);表示自动填充每一份占30%，未分配的空间将空余

        ul {
            display: grid;
            grid-template-columns:repeat(auto-fill, 30%);
            border: 1px solid red;
        }

2.1.6 最大值和最小值minmax

• 当空间满足时，显示最大值
• 当空间不足时，使用最小值
• 当空间不满足最大值且大于最小值时，则取值为最小值与最大值中间的值

        ul {
            display: grid;
            grid-template-columns: 200px 100px minmax(100px, 400px);
            border: 1px solid red;
        }

上面例子中minmax(100px, 400px) 表示列宽不小于100px，不大于400px。

2.2 gap属性

row-gap：行与行的间隔（行间距）
column-gap：列与列的间隔（列间距）
gap：column-gap和row-gap的合并简写形式

        ul {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            border: 1px solid red;
            row-gap: 10px;
            column-gap: 10px;
        }

上面代码可以简写为gap: 10px；

2.3 grid-template-areas 属性

grid-template-areas 用于为网格容器中的网格轨道（列和行）定义命名区域，然后通过每个子项的 grid-area 属性，将它们与对应的区域名称关联起来

1. 为每个网格项命名
   首先，在定义网格容器的时候为每个网格项分配一个区域名称，可以使用引号和空格来表示每一行，用句点 . 来表示空区域。

        ul {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-template-areas:
                "header header header"
                "nav main main"
                "nav main main"
                "footer footer footer";
            border: 1px solid red;
            gap: 10px;
        }

2. 将网格项关联到区域名称

        .header {
            grid-area: header;
            background-color: #f2f2f2;
        }

        .nav {
            grid-area: nav;
            background-color: #d5e8d4;
        }

        .main {
            grid-area: main;
            background-color: #cce5ff;
        }

        .footer {
            grid-area: footer;
            background-color: #ffb3ba;
        }

3. 实现网格布局

    <ul>
        <div class="header">Header</div>
        <div class="nav">Nav</div>
        <div class="main">Main Content</div>
        <div class="footer">Footer</div>
    </ul>

实现效果图

2.3 grid-auto-flow 属性

grid-auto-flow属性调整网格的排列方向，默认值为row是横着排列，可以设置成column竖着排列

        ul {
            display: grid;
            grid-template-rows: repeat(3, 1fr);
            border: 1px solid red;
            grid-auto-flow: column;
            gap: 10px;
        }

2.4 单元格对其方式justify-items、align-items、place-items属性

justify-items：单元格水平方向(左中右)
align-items：单元格垂直方向(上中下)
place-items：单元格垂直方向 单元格水平方向

属性可以取下面这些值

• start：对齐单元格的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部居中。
• stretch：拉伸，占满单元格的整个宽度（默认值）。

        ul {
            display: grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);
            gap: 10px;
            justify-items: start;
            align-items: end;
        }

上面代码相当于place-items:end start; 如果省略第二个值，则浏览器认为与第一个值相等。

2.5 整个内容区域对其方式 justify-content、align-content、place-content属性

justify-content：整个内容区域在容器里面的水平位置(左中右）
align-content：整个内容区域的垂直位置(上中下）
place-content：整个内容区域垂直方向 整个内容区域水平方向

属性可以取下面这些值

• start：对齐容器的起始边框。
• end：对齐容器的结束边框。
• center：容器内部居中。
• stretch：项目大小没有指定时，拉伸占据整个网格容器。
• space-around ： 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
• space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
• space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

        ul {
            width: 500px;
            height: 500px;
            display: grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);
            gap: 10px;
            align-content: center;
            justify-content: center;
            border: 1px solid red;
        }

当然也可以这样写place-content：center,如果省略第二个值，浏览器就会假定第二个值等于第一个值。

2.6. grid-auto-columns和grid-auto-rows属性

grid-auto-columns:定义在网格容器中隐式创建的列的大小
grid-auto-rows:定义在网格容器中隐式创建的行的大小。

        ul {
            width: 500px;
            height: 500px;
            display: grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);
            gap: 10px;
            place-content: center;
            border: 1px solid red;
            grid-auto-columns: 40px;
            grid-auto-rows: 40px;
        }

这个例子中第10项是多余的，没有设置宽高，就采用了grid-auto-columns属性和grid-auto-rows属性设置的列宽和行高。

grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。
它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

三、项目属性

3.1 定位属性

grid-column-start 和 grid-column-end：用于指定项目横跨的列线，将项目放置在指定列之间，左边框所在的垂直网格线与右边框所在的垂直网格线
grid-row-start 和 grid-row-end：用于指定项目横跨的行线，将项目放置在指定行之间，上边框所在的水平网格线与下边框所在的水平网格线
grid-column：grid-column-start 和 grid-column-end 的缩写形式。
grid-row：grid-row-start 和 grid-row-end 的缩写形式

• 例1：

        ul {
            display: grid;
            width: 500px;
            height: 500px;
            gap: 2px;
            border: 1px solid red;
        } 

        li:nth-child(1) {
            background-color: red;
            grid-column-start: 2;
            grid-column-end: 5;
        }

这里表示了，第一个li的左边框是第二根垂直网格线，右边框是第五根垂直网格线。
除了第一个li以外，其他li都没有指定位置，由浏览器自动布局。

• 例2：

        li:nth-child(1) {
            background-color: red;
            grid-column-start: 2;
            grid-column-end: 5;
            grid-row-start: 2;
            grid-row-end: 4;
        }

这里表示了，第一个li的左边框是第二根垂直网格线，右边框是第五根垂直网格线。上边框为第二根水平网格线，下边框是第四根水平网格线。

注：如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。

上面的例子用 grid-column与grid-row可以简写为grid-column: 2 / 5; grid-row: 2 / 4;

关键字span :表示跨域几个单元格，即左右边框（上下边框）之间跨越多少个网格。
span后面的单元格数量等于最后一个网格线-第一个网格线。

• 例3：

        li:nth-child(1) {
            background-color: red;
            grid-column-start: span 2;
        }

这里grid-column-start: span 2代表跨越2个网格等同于grid-column-end: span 2

上面的例2也可以这样写，效果是一样的

        li:nth-child(1) {
            background-color: red;
            grid-column: 2 / span 3;
            grid-row: 2 / span 2;
        }

3.2 对齐属性

justify-self：控制项目在单元格中水平方向上的对齐方式，可以让项目在单元格中自行对齐，而不受容器的对齐方式影响。
align-self：与 justify-self 类似，用于控制项目在单元格中垂直方向上的对齐方式。
place-self：该属性是 justify-self 和 align-self 的简写形式，可以同时设置水平和垂直方向上的对齐方式。

可以取值

• start：对齐单元格的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部居中。
• stretch：拉伸，占满单元格的整个宽度（默认值）。

        ul {
            display: grid;
            width: 500px;
            height: 500px;
            gap: 2px;
            border: 1px solid red;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
        } 

        li:nth-child(1) {
            background-color: red;
            justify-self: center;
        }

其实 justify-self和align-self 与 justify-items和align-items用法完全一致，只是前者作用于单个单元格，后者作用于整个项目。

place-self也是同理

        li:nth-child(1) {
            background-color: red;
            place-self: center ;
        }

3.3 复合属性 grid-area

grid-area：指定项目放在哪一个区域。可以同时指定行的起始和结束线以及列的起始和结束线。这个属性的使用非常方便，可以直接使用区域的名称进行指定。

参考2.3 的grid-template-areas属性

        .header {
            grid-area: header;
            background-color: #f2f2f2;
        }

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

grid-area: <row-start> / <column-start> / <row-end> / <column-end>

举例

        ul {
            display: grid;
            width: 500px;
            height: 500px;
            gap: 2px;
            border: 1px solid red;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(4, 1fr);
        }
        li:nth-child(1) {
            grid-area: 1 / 2 / 3 / 3;
            background-color: red;
        }

end

参考：阮一峰CSS Grid 网格布局教程