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完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

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