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

哈力9506

已通过 84 关

码友4797116

已通过 83 关

2257

已通过 79 关

4

学号:4031030

已通过 66 关

5

4586

已通过 64 关

6

5220

已通过 54 关

7

All My People

已通过 43 关

8

学号:3333385

已通过 36 关

9

3810

已通过 29 关

10

shersam

已通过 28 关

11

枫中零落

已通过 26 关

12

易菊香

已通过 22 关

13

1409

已通过 21 关

14

修行者-埃文

已通过 19 关

15

6317

已通过 19 关

16

码友4798995

已通过 16 关

17

6860

已通过 16 关

18

6952

已通过 15 关

19

2748

已通过 15 关

20

9829

已通过 15 关

21

学号:4797132

已通过 15 关

22

GeekLuo

已通过 15 关

23

3109

已通过 15 关

24

12385170281

已通过 15 关

25

码友4799084

已通过 15 关

26

学号:4797730

已通过 15 关

27

7446

已通过 15 关

28

2809432

已通过 15 关

29

摋7068

已通过 15 关

30

打烊勿扰

已通过 15 关

31

学号:3753180

已通过 15 关

32

学号:3394950

已通过 14 关

33

8849

已通过 14 关

34

灏c3

已通过 14 关

35

oo從兲絳

已通过 14 关

36

德芙dfu

已通过 14 关

37

码友4797169

已通过 13 关

38

学号:4056123

已通过 13 关

39

蒙大大

已通过 12 关

40

ellire

已通过 12 关

41

3993

已通过 10 关

42

呼7185

已通过 10 关

43

2315

已通过 10 关

44

2816

已通过 10 关

45

蓝图1348

已通过 10 关

46

RE017541

已通过 8 关

47

学号:4796554

已通过 8 关

48

7755

已通过 8 关

49

9101

已通过 7 关

50

学号:4406750

已通过 7 关

51

2910

已通过 7 关

52

耀耀大王

已通过 6 关

53

未来可期5183

已通过 6 关

54

8734

已通过 6 关

55

1802

已通过 6 关

56

3450

已通过 5 关

57

学号:4801583

已通过 5 关

58

程序羊

已通过 5 关

59

7171

已通过 5 关

60

学号:120748

已通过 5 关

61

码友4800455

已通过 5 关

62

6703

已通过 5 关

63

Zhaohua

已通过 5 关

64

7781

已通过 5 关

65

9396

已通过 5 关

66

如果你还没有睡9084

已通过 5 关

67

4555

已通过 5 关

68

prolove2031

已通过 4 关

69

9134

已通过 4 关

70

4849

已通过 4 关

71

武文斌

已通过 4 关

72

微信用户9879

已通过 4 关

73

学号:4794042

已通过 4 关

74

2218

已通过 4 关

75

3633

已通过 4 关

76

苹果不太甜_

已通过 4 关

77

4558

已通过 4 关

78

8272

已通过 4 关

79

6676

已通过 3 关

80

7121

已通过 3 关

81

6185

已通过 3 关

82

学号:4567250

已通过 3 关

83

8564

已通过 3 关

84

学号:4663724

已通过 3 关

85

老派6052

已通过 3 关

86

3553

已通过 3 关

87

4802

已通过 3 关

88

3733

已通过 3 关

89

学号4224678

已通过 3 关

90

8718

已通过 3 关

91

1714

已通过 3 关

92

学号:169507

已通过 3 关

93

1603

已通过 3 关

94

朱世奔

已通过 3 关

95

2423

已通过 2 关

96

学号:4760252

已通过 2 关

97

残梦天下

已通过 2 关

98

微信用户4790

已通过 2 关

99

学号:4799714

已通过 2 关

100

3606

已通过 2 关