html实现网格布局排版整齐的表格,Web 前端 - CSS - Grid 网格布局及通用PC端布局实战...

Web 前端 - CSS - Grid 网格布局及通用PC端布局实战

[toc]

一、概述序号

属性

描述

1

解释

网格布局是一个二维的基于网格的布局系统

2

特点

由水平(行)和垂直(列)线集合创建的一个模式，我们可以根据这个模式排列我们的设计元素

3

场景

和flex配合能够快速布局复杂的页面，使用媒体查询重新排列网格变得非常容易，同时gird布局比其他布局方式所需的代码量少很多

二、网格容器网格容器：应用 display: grid 的元素。这是所有网格项的直接父级元素

网格项：网格容器的直接子元素，也叫项目

网格线：构成网格结构的分界线。它们既可以是垂直的(“列网格线(column grid lines)”)，也可以是水平的(“行网格线(row grid lines)”)，并位于行或列的任一侧

网格轨道：两条相邻网格线之间的空间。你可以把它们想象成网格的列或行

1. 属性序号

属性

描述

格式

1

grid-template-columns

显式定义列及单元格的宽度

grid-template-columns: [line_name] cell_width_1 [line_name] cell_width_2 [line_name] cell_width_3;

2

grid-template-rows

显式定义行及单元格的高度

grid-template-rows: [line_name] cell_height_1 [line_name] cell_height_2 [line_name] cell_height_3;

3

grid-auto-columns

隐式定义列及单元格的宽度，当项目多于单元格时就会创建隐式单元格

grid-auto-columns: cell_height_1 cell_height_2 cell_height_3;

4

grid-auto-rows

隐式定义行及单元格的高度，当项目多于单元格时就会创建隐式单元格

grid-auto-rows: cell_height_1 cell_height_2 cell_height_3;

5

grid-auto-flow

设置项目在单元格中的排列方式

6

justify-content

设置单元格在容器横轴(行)上的对齐方式

7

align-content

设置单元格在容器纵轴(列)上的对齐方式

8

place-content

justify-content和align-content属性的简写

9

justify-items

设置项目在单元格横轴(行)上的对齐方式

10

align-items

设置项目在单元格纵轴(列)上的对齐方式

11

place-items

justify-items和align-items属性的简写

12

column-gap

设置列间距

13

row-gap

设置行间距

14

gap

column-gap和row-gap属性的简写

2. 值序号

值/单位

描述

适用属性

备注

1

auto

浏览器自动计算

grid-template-columns、grid-template-rows、grid-auto-columns、grid-auto-rows

2

px

固定值，像素计

grid-template-columns、grid-template-rows、grid-auto-columns、grid-auto-rows

3

%

百分比，按百分比分配

grid-template-columns、grid-template-rows、grid-auto-columns、grid-auto-rows

4

fr

比例，按比例分配

grid-template-columns、grid-template-rows、grid-auto-columns、grid-auto-rows

5

repeat

重复、分组、弹性、自动填充设置

grid-template-columns、grid-template-rows

重复：grid-template-columns: repeat (n, cell_height_1 cell_height_2 cell_height_3)，n代表重复的次数，cell_height代表单元格的宽度

6

row

默认值。水平(行)方向，顺序为从左往右

grid-auto-flow

7

column

垂直(列)方向，顺序为从上往下

grid-auto-flow

8

start

默认值。左侧起始线对齐

justify-content

9

end

右侧终止线对齐

justify-content

10

center

居中对齐

justify-content

11

stretch

填充满整个网格容器的宽度

justify-content

12

space-evenly

平均对齐。剩余空间在每个单元格之间平均分配

justify-content

13

space-around

分散对齐。剩余空间在每个单元格两侧平均分配

justify-content

14

space-between

两端对齐。剩余空间在头尾单元格之外的子元素之间平均分配

justify-content

15

start

默认值。顶部起始线对齐

align-content

16

end

底部终止线对齐

align-content

17

center

居中对齐

align-content

18

stretch

填充满整个网格容器的高度

align-content

19

space-evenly

平均对齐。剩余空间在每个单元格之间平均分配

align-content

20

space-around

分散对齐。剩余空间在每个单元格两侧平均分配

align-content

21

space-between

两端对齐。剩余空间在头尾单元格之外的子元素之间平均分配

align-content

22

start

默认值。单元格左侧起始线对齐

justify-items

23

end

单元格右侧终止线对齐

justify-items

24

center

居中对齐

justify-items

25

stretch

填满单元格的宽度

justify-items

26

start

默认值。单元格顶部起始线对齐

align-items

27

end

单元格底部终止线对齐

align-items

28

center

居中对齐

align-items

29

stretch

填满单元格的高度

align-items

三、网格单元格网格单元格：两个相邻的行和两个相邻的列网格线之间的空间，这是构成网格系统的一个基本单元

1. 属性序号

属性

描述

格式

1

grid-column-start

引用列网格线划分单元格跨度，单元格开始的列网格线

`grid-column-start: n

span n

line_name

auto`

2

grid-column-end

引用列网格线划分单元格跨度，单元格结束的列网格线

`grid-column-end: n

span n

line_name

auto`

3

grid-row-start

引用行网格线划分单元格跨度，单元格开始的行网格线

`grid-row-start: n

span n

line_name

auto`

4

grid-row-end

引用行网格线划分单元格跨度，单元格结束的行网格线

`grid-row-end: n

span n

line_name

auto`

5

grid-column

grid-column-start和grid-column-end属性的简写

`grid-column: satrt-line / end-line

satrt-line / span n`

6

grid-row

grid-row-start和grid-row-end属性的简写

`grid-row: satrt-line / end-line

satrt-line / span n`

7

justify-self

设置某项目在单元格横轴(行)上的对齐方式

8

align-self

设置某项目在单元格纵轴(列)上的对齐方式

9

place-self

justify-items和align-items属性的简写

2. 值序号

值

描述

适用属性

1

start

默认值。单元格左侧起始线对齐

justify-self

2

end

单元格右侧终止线对齐

justify-self

3

center

居中对齐

justify-self

4

stretch

填满单元格的宽度

justify-self

5

start

默认值。单元格顶部起始线对齐

align-self

6

end

单元格底部终止线对齐

align-self

7

center

居中对齐

align-self

8

stretch

填满单元格的高度

align-self

四、网格区域网格区域：由网格单元格组成的矩形块，一个网格区域可以由任意数量的网格单元格组成

属性序号

属性

描述

格式

适用

1

grid-template-areas

通过引用grid-area属性指定的网格区域名称来定义网格模板

`grid-template-areas: grid-area_name

.

none`

容器

2

grid-area

为项目提供一个名称，以便可以被使用网格容器 grid-template-areas 属性创建的模板进行引用，或者直接划分单元格跨度

`grid-area: item_name

grid-row-start / grid-column-start / grid-row-end / grid-column-end`

项目

五、代码实例

1. 使用固定值、百分比、比例、auto、repeat重复、分组、弹性和自动填充设置显式地划分行和列

1.1 使用固定值显式地划分行和列

Document

.box{

width:400px;

height:400px;

background-color:lightblue;

display:grid;

grid-template-columns:100px100px100px;

grid-template-rows:100px100px100px;

}

span{

background-color:lightcoral;

}

1

2

3

4

5

6

7

8

9