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

已通过 150 关

1326

已通过 98 关

007FFF

已通过 94 关

4

学号4270173

已通过 85 关

5

4983

已通过 58 关

6

德芙dfu

已通过 45 关

7

6317

已通过 44 关

8

MARSBig triangle

已通过 24 关

9

学号:3965273

已通过 23 关

10

学号:335570

已通过 21 关

11

大可8023

已通过 20 关

12

吉永红

已通过 18 关

13

3434

已通过 18 关

14

码友4773330

已通过 17 关

15

9927

已通过 17 关

16

蓝图1348

已通过 16 关

17

8871

已通过 16 关

18

3934

已通过 16 关

19

Covs

已通过 15 关

20

学号:4087626

已通过 15 关

21

冯秋源爸爸

已通过 15 关

22

7606

已通过 15 关

23

也盼寒光遇骄阳

已通过 15 关

24

7980

已通过 15 关

25

8366

已通过 15 关

26

9603

已通过 15 关

27

3763

已通过 15 关

28

4467

已通过 15 关

29

猫尾的泪痣

已通过 15 关

30

1253

已通过 15 关

31

忘记睡

已通过 15 关

32

码友4775628

已通过 15 关

33

5633

已通过 15 关

34

流年亦梦9849

已通过 15 关

35

码友2382915

已通过 15 关

36

BLACK MOON

已通过 15 关

37

8461

已通过 15 关

38

学号:3999662

已通过 15 关

39

6406

已通过 15 关

40

潘6926

已通过 15 关

41

HYJ丶

已通过 15 关

42

Victoria4874

已通过 15 关

43

4159

已通过 15 关

44

码友4774650

已通过 15 关

45

8705

已通过 15 关

46

焕蔚

已通过 15 关

47

3089

已通过 15 关

48

8580

已通过 14 关

49

学号:4776084

已通过 13 关

50

7414

已通过 13 关

51

6502

已通过 13 关

52

1847

已通过 13 关

53

微信用户3189

已通过 13 关

54

1497

已通过 12 关

55

1083

已通过 12 关

56

5681

已通过 12 关

57

6531

已通过 11 关

58

王嘉祺6591

已通过 11 关

59

学号:3822307

已通过 11 关

60

3432

已通过 11 关

61

雨秋7312

已通过 10 关

62

学号:3409893

已通过 10 关

63

4708

已通过 10 关

64

学号:4204549

已通过 10 关

65

Jason_Chu

已通过 10 关

66

4401

已通过 10 关

67

1974

已通过 10 关

68

学号:1177253

已通过 10 关

69

莫雨千秋

已通过 10 关

70

6549

已通过 9 关

71

2897

已通过 9 关

72

傻子的梦

已通过 9 关

73

学号:4765525

已通过 9 关

74

冯金凯

已通过 8 关

75

7419

已通过 8 关

76

诡森灵Crowboy

已通过 8 关

77

答案说明所有1474

已通过 8 关

78

学号:4706580

已通过 8 关

79

K2123

已通过 7 关

80

7787

已通过 7 关

81

码友4772936

已通过 7 关

82

梦依然8106

已通过 7 关

83

码友4778168

已通过 7 关

84

学号:4416472

已通过 7 关

85

码友4602879

已通过 7 关

86

1643

已通过 7 关

87

carpe diem3498

已通过 7 关

88

8641

已通过 7 关

89

学号:4780539

已通过 7 关

90

7910

已通过 6 关

91

3553

已通过 6 关

92

学号:4183046

已通过 6 关

93

8749

已通过 6 关

94

1547

已通过 6 关

95

6625

已通过 6 关

96

明天2316

已通过 6 关

97

码友2937281

已通过 6 关

98

4909

已通过 6 关

99

学号:4777499

已通过 6 关

100

2718

已通过 6 关