CSS3 Grid 网格布局实战 - w3cschool编程实战

欢迎回到 CSS3 Grid 网格布局实战

开始闯关

CSS3 Grid 网格布局实战

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

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

共28关

CSS3 网格布局

关卡 1

创建 CSS 网格

关卡 2

使用 grid-template-columns 添加多列

关卡 3

使用 grid-template-rows 添加多行

关卡 4

使用 CSS 网格单位来更改列和行的大小

关卡 5

使用 grid-column-gap 创建多列之间的间距

关卡 6

使用 grid-row-gap 创建多行之间的间距

关卡 7

使用 grid-gap 为网格添加间距

关卡 8

使用 grid-column 来控制空间大小

关卡 9

使用 grid-row 来控制空间大小

关卡 10

使用 justify-self 属性

关卡 11

使用 align-self 属性

关卡 12

使用 justify-items 属性

关卡 13

使用 align-items 属性

关卡 14

使用 grid-template-areas 属性

关卡 15

使用 grid-area 属性

关卡 16

使用 grid-area 属性创建区域模板

关卡 17

使用 repeat 函数

关卡 18

使用 minmax 函数

关卡 19

使用 auto-fill 关键字

关卡 20

使用 auto-fit 关键字

关卡 21

使用媒体查询创建响应式布局

关卡 22

在网格中创建网格

关卡 23

空间居中布局

关卡 24

空间左上角布局

关卡 25

空间右下角布局

关卡 26

两栏式布局

关卡 27

三明治布局

关卡 28

圣杯布局

实战证书

通过本门实战闯关即可获取！

总共 28 关

已完成 0%

权威性

W3Cschool官方平台认证，无可替代的权威性和纪念性。

学习证明

随时查看学习记录，是认可自己学习结果的有效证明。

自我激励

每一张证书都记录着自己的成长，铭刻每一分付出和成就。

领取证书

周排行榜

排行TOP100

李茹云

已通过 26 关

3125

已通过 22 关

3728

已通过 17 关

4

5674

已通过 15 关

5

朱世奔

已通过 11 关

6

我怕大神

已通过 11 关

7

7538

已通过 10 关

8

2472

已通过 10 关

9

学号:4827592

已通过 10 关

10

王延兵

已通过 8 关

11

忆白7390

已通过 7 关

12

4133

已通过 7 关

13

学号:4834212

已通过 7 关

14

9458

已通过 6 关

15

u un x o7619

已通过 6 关

16

李晋

已通过 5 关

17

学号:4834164

已通过 5 关

18

5808

已通过 5 关

19

2949

已通过 5 关

20

微信用户3337

已通过 4 关

21

6596

已通过 2 关

22

哈哈哈3285

已通过 2 关

23

7317

已通过 2 关

24

学号4170893

已通过 2 关

25

8852

已通过 1 关

26

错过遗憾

已通过 1 关

27

学号:4833233

已通过 1 关

28

学号880632

已通过 1 关

29

千帆3803

已通过 1 关

30

9317

已通过 1 关

31

学号:4834648

已通过 1 关

32

4455

已通过 1 关

33

19473

已通过 1 关

34

3169

已通过 1 关

35

1948

已通过 1 关

36

学号:4074821

已通过 1 关

37

5892

已通过 1 关