网格布局--grid

一、定义网格及fr单位

1.1 定义网格及fr单位

1.2 容器

1.3 子项

c. justify-self/align-self/place-self

二、常见布局

2.1 叠加布局

三、多种组合排列布局

四、栅格布局

五、容器自适应行列布局

5.1 行自适应布局

5.2 列自适应布局

CSS网格是一个用于web二维的布局系统。利用网格，可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。

一、定义网格及fr单位

1.1 定义网格及fr单位

其实网格布局就是和我们日常生活中用到的excle表格是一样的，由行和列组成，因此网格布局主要是实现二维的布局方式

这里的行是用 row 来表示的，列是用 columm 来表示的，一个小的单元格叫 cell ，之间还有一个间隙用 gap 来表示

还有就是单元格是可以进行合并的，合并完之后就是一个 area

1.2 容器

a. grid-template-rows/grid-template-columns

基于网格行和列的维度，去定义网格线的名称和网格轨道的尺寸大小

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main {width: 300px;height: 300px;background: skyblue;/* 网格布局 */display: grid;/* 定义3行3列 *//* grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px; *//* 定义2行3列 *//* grid-template-columns: 100px 20% auto;grid-template-rows: 100px 100px; *//* 网格布局专用单位 fr 按比例进行均分 */grid-template-columns: 150px 1fr 1fr;grid-template-rows: 1fr .6fr;}.main div {background-color: pink;}</style>
</head>
<body><div class="main"><div>11</div><div>21</div><div>31</div><div>41</div><div>51</div><div>61</div><div>71</div><div>81</div><div>91</div></div>
</body>
</html>

b. grid-template-areas

单元格合并

使用命名方式定义网格区域，需配合 grid-area（子项）属性进行使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main {width: 300px;height: 300px;background-color: skyblue;display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;/* 需要配合  grid-area 子项使用才能生效需要通过引号，通过自己自定义命名的方式*//*第一行前两个单元格合并第二行前两个单元格合并第三行三个单元格合并 *//* grid-template-areas: "a1 a1 a2""a1 a1 a2""a3 a3 a3"; */grid-template-areas: "a1 a2 a3";}.main div {background-color: pink;border: 1px solid;}/* .main div:nth-of-type(1) {grid-area: a1;}.main div:nth-of-type(2) {grid-area: a2;}.main div:nth-of-type(3) {grid-area: a3;} */.main div:nth-of-type(1) {grid-area: a3;}        </style>
</head>
<body><div class="main"><div>11</div><div>21</div><div>31</div></div>
</body>
</html>

简写属性：

grid-template 是 grid-template-rows，grid-template-columns 和 grid-template-area 属性的缩写

c. grid-row-gap/grid-column-gap/grid-gap

用来设置元素行列之间的间隙大小，推荐使用 row-gap、column-gap、gap，为了更加统一的在其他布局中能够更好的进行使用，因此会把 grid 前缀去掉，这样的话我们也能把这几个属性放到弹性布局当中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main {width: 300px;height: 300px;background-color: skyblue;display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;/* 需要配合  grid-area 子项使用才能生效需要通过引号，通过自己自定义命名的方式*//*第一行前两个单元格合并第二行前两个单元格合并第三行三个单元格合并 */grid-template-areas: "a1 a1 a2""a1 a1 a2""a3 a3 a3";/* grid-row-gap: 20px; *//* grid-column-gap: 10px; */row-gap: 20px;column-gap: 10px;/* 复合样式grid-gap: row-gap column-gap; 老式写法gap: row-gap column-gap; 推荐写法*/}.main div {background-color: pink;border: 1px solid;}.main div:nth-of-type(1) {grid-area: a1;}.main div:nth-of-type(2) {grid-area: a2;}.main div:nth-of-type(3) {grid-area: a3;}</style>
</head>
<body><div class="main"><div>11</div><div>21</div><div>31</div></div>
</body>
</html>

d. justify-items/align-items/place-items

单元格默认靠左靠上对齐

子项小于单元格时的对齐方式

默认值stretch--拉伸，指定了子项在网格中的对齐方式

justify-iteme：水平方向对齐方式 start/end/center/left/right...

align-items：垂直方向 baseline/end/center/stretch/start...

place-items：复合写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main {width: 300px;height: 300px;background-color: skyblue;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;justify-items: start;align-items: end;/* 复合样式 *//* place-items: align-items justify-items; */}.main div {width: 50px;height: 50px;background-color: pink;}</style>
</head>
<body><div class="main"><div>11</div><div>21</div><div>31</div><div>41</div><div>51</div><div>61</div><div>71</div><div>81</div><div>91</div></div>
</body>
</html>

e. justify-content/align-content/place-content

默认值 stretch--拉伸，指定了所有网格在 grid 容器中的对齐方式，条件就是容器一定要比单元格大，才能看到这个过程

单元格小于容器时，单元格整体的对齐方式

justify-content：center/end/start/space-around/space-between...

align-content：center/end/start/space-around/space-between...

place-content：符合属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main {width: 300px;height: 300px;background-color: skyblue;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;justify-items: start;align-items: end;/* 复合样式 *//* place-items: align-items justify-items; */}.main div {width: 50px;height: 50px;background-color: pink;}.main2 {width: 500px;height: 500px;background-color: greenyellow;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;justify-content: space-between;align-content: space-between;/* 复合属性 *//* place-content: align-content justify-content; */}.main2 div {background-color: orangered;}</style>
</head>
<body><div class="main"><div>11</div><div>21</div><div>31</div><div>41</div><div>51</div><div>61</div><div>71</div><div>81</div><div>91</div></div><div class="main2"><div>11</div><div>21</div><div>31</div><div>41</div><div>51</div><div>61</div><div>71</div><div>81</div><div>91</div></div>
</body>
</html>

f. grid-auto-flow/grid-auto-rows/grid-auto-columns

指定在显示网格之外的隐式网格如何排列及尺寸大小

显示网格：子项有多少个，网格就有多少个，一一对应

隐式网格：网格个数小于子项个数

grid-auto-rows：默认：row 就是行产生隐式网格

grid-auto-flow：调节产生隐式网格的高度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main {width: 300px;height: 300px;background-color: skyblue;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px;/* 默认：row 就是行产生隐式网格 */grid-auto-flow: row;/* 可以调节产生隐式网格的高度 */grid-auto-rows: 150px;/* grid-template-columns: 100px;grid-template-rows: 100px 100px 100px; *//* colum 就是列产生隐式网格 *//* grid-auto-flow: column; *//* 可以调节产生隐式网格的宽度 *//* grid-auto-columns: 100px; */}.main div {background-color: orange;border: 1px solid;box-sizing: border-box;}.main2 {width: 300px;height: 300px;background-color: aquamarine;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px;/* dense 紧密属性 */grid-auto-flow: row dense;grid-auto-rows: 100px;}.main2 div {background-color: blueviolet;border: 1px solid;box-sizing: border-box;}.main2 div:nth-of-type(1) {grid-column-start: 2;}</style>
</head>
<body><div class="main"><!-- 显示网格 --><div>11</div><div>21</div><div>31</div><!-- 隐式网格 --><div>41</div><div>51</div></div><hr><div class="main2"><!-- 显示网格 --><div>11</div><div>21</div><div>31</div><!-- 隐式网格 --><div>41</div><div>51</div></div>
</body>
</html>

1.3 子项

a. grid-column-start/grid-column-end/grid-row-start/grid-row-end

基于线的元素放置

表示 grid 子项所占据的区域的起始和终止位置，包括水平方向和垂直方向

简写方式：

基于线对应位置的缩写方式，通过 / 作为分割

grid-row：grid-row-start/grid-row-end

grid-column：grid-column-start/grid-column-end

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* .main {width: 300px;height: 300px;background-color: skyblue;display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;} *//* .main div:nth-of-type(1) {background-color: pink;grid-column-start: 2;grid-column-end: 3;grid-row-start: 2;grid-row-end: 4;}.main div:nth-of-type(2) {background-color: orange;} *//* .main {width: 300px;height: 300px;background-color: skyblue;display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;} *//* .main div:nth-of-type(1) {background-color: pink; *//* span 2：表示占两列 *//* grid-column-start: span 2; *//* grid-column-start: 2;grid-column-end: span 2;} *//* .main div:nth-of-type(2) {background-color: orange;} */.main {width: 300px;height: 300px;background-color: skyblue;display: grid;/*  [col1] [row1]  对线进行命名  */grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4];grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4];}.main div:nth-of-type(1) {background-color: pink;grid-column-start: col2;grid-column-end: col4;}</style>
</head>
<body><div class="main"><div>1</div><!-- <div>2</div> --></div>
</body>
</html>

b. grid-area

grid-row-start,grid-column-start,grid-row-end以及grid-column-end属性的缩写，以及额外支持 grid-template-arease 设置的网格名称

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

c. justify-self/align-self/place-self

跟 place-item 用法相同，只不过是操作指定的子项

justify-self：center/end/auto/baseline/start...

align-self：center/end/auto/baseline/start...

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main {width: 300px;height: 300px;background-color: skyblue;display: grid;/*  [col1] [row1]  对线进行命名  */grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4];grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4];}.main div:nth-of-type(1) {width: 50px;height: 50px;justify-self: center;align-self: center;background-color: pink;grid-area: 2 / 2 / 4 / 3;}</style>
</head>
<body><div class="main"><div>1</div></div>
</body>
</html>

d. repeat() 与 minmax()

repeat()方法及 auto-fill 可选值，指定可重复的数值

auto-fill 会自动的根据容器的大小决定应该产生多少个网格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main {height: 400px;background-color: skyblue;display: grid;/* 1 *//* grid-template-columns: 100px 100px 100px; 等价于*//* grid-template-columns: repeat(3, 100px); *//* 2 *//* grid-template-columns: 150px 100px 100px; 等价于*//* grid-template-columns: 150px repeat(2, 100px); *//* 3 */grid-template-columns: 150px repeat(auto-fill, 100px);grid-template-rows: 100px;}.main div {background-color: #f40;}</style>
</head>
<body><div class="main"><div>1</div><div>2</div><div>3</div><!-- 3 --><div>4</div></div>
</body>
</html>

minmax() 方法，设置最小和最大值的范围

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main {height: 400px;background-color: skyblue;display: grid;/* grid-template-columns: 150px 1fr 100px; */grid-template-columns: 150px minmax(100px,1fr) 100px;grid-template-rows: 100px;}.main div {background-color: #f40;border: 1px solid;}</style>
</head>
<body><div class="main"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main {background: skyblue;display: grid;grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));/* 显式网格 */grid-template-rows: 100px;/* 隐式网格 */grid-auto-rows: 100px;grid-gap: 20px 20px;}.main div {background-color: orange;border: 1px solid;}</style>
</head>
<body><div class="main"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div></div>
</body>
</html>