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

学号:2257983

已通过 111 关

德芙dfu

已通过 55 关

学号:4193726

已通过 43 关

4

ChenLy青

已通过 37 关

5

学号:4824432

已通过 33 关

6

5264

已通过 24 关

7

码友4843101

已通过 24 关

8

码友4753918

已通过 23 关

9

学号:4842039

已通过 20 关

10

学号3133549

已通过 18 关

11

6152

已通过 15 关

12

码友4843377

已通过 15 关

13

6206

已通过 15 关

14

4834

已通过 15 关

15

6614

已通过 15 关

16

月球上人

已通过 15 关

17

学号:4610029

已通过 13 关

18

别随便解绑

已通过 12 关

19

薛定谔的萨摩耶

已通过 10 关

20

空冥2212

已通过 10 关

21

阿雄3570

已通过 10 关

22

汾陇

已通过 9 关

23

5719

已通过 9 关

24

4423

已通过 7 关

25

学号:4843366

已通过 7 关

26

雾海锈锚

已通过 6 关

27

8971

已通过 6 关

28

8599

已通过 6 关

29

码友4843402

已通过 5 关

30

1124

已通过 5 关

31

4871

已通过 5 关

32

8589

已通过 5 关

33

3591

已通过 5 关

34

阿门阿前一颗葡萄树

已通过 5 关

35

2468

已通过 4 关

36

3180

已通过 4 关

37

7511

已通过 3 关

38

狡猾的兔子5859

已通过 3 关

39

码友4841867

已通过 3 关

40

9881

已通过 3 关

41

4934

已通过 3 关

42

焓焓大魔王

已通过 3 关

43

4719

已通过 3 关

44

9716

已通过 2 关

45

绝代风华8587

已通过 2 关

46

l-5704

已通过 2 关

47

雷霆

已通过 2 关

48

遗憾4179

已通过 2 关

49

3043

已通过 2 关

50

1986

已通过 2 关

51

罹毓

已通过 2 关

52

shuiuo

已通过 2 关

53

1711

已通过 2 关

54

码友4842562

已通过 2 关

55

1716

已通过 2 关

56

9067

已通过 2 关

57

lucasGoGoGo

已通过 2 关

58

仰光9477

已通过 1 关

59

9394

已通过 1 关

60

5533

已通过 1 关

61

楠江

已通过 1 关

62

码友4835750

已通过 1 关

63

僵小鱼5696

已通过 1 关

64

码友4841002

已通过 1 关

65

6659

已通过 1 关

66

学号4805973

已通过 1 关

67

小_尘埃

已通过 1 关

68

AUV3953

已通过 1 关

69

学号:4843459

已通过 1 关

70

落叶满长安

已通过 1 关

71

2398

已通过 1 关

72

1033

已通过 1 关

73

Mortal8293

已通过 1 关

74

5747

已通过 1 关

75

学号:4842561

已通过 1 关

76

6052

已通过 1 关

77

上岸5092

已通过 1 关