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

shersam

已通过 193 关

学号:4193726

已通过 131 关

朱世奔

已通过 93 关

4

不苦_

已通过 67 关

5

码友4753918

已通过 39 关

6

1124

已通过 28 关

7

小小正4482

已通过 28 关

8

Darwin and I

已通过 26 关

9

业珹

已通过 26 关

10

德芙dfu

已通过 24 关

11

柒天7256

已通过 22 关

12

霞4511

已通过 19 关

13

学号:3846762

已通过 18 关

14

2561

已通过 16 关

15

6818

已通过 15 关

16

8673

已通过 15 关

17

码友4822460

已通过 15 关

18

3559

已通过 15 关

19

5801

已通过 15 关

20

予你一生h

已通过 15 关

21

9971

已通过 15 关

22

兼1107

已通过 15 关

23

码友4817834

已通过 15 关

24

7302

已通过 15 关

25

欧阳布咻

已通过 15 关

26

TT6583

已通过 15 关

27

5477

已通过 15 关

28

8490

已通过 15 关

29

码友4820469

已通过 15 关

30

1393

已通过 15 关

31

6175

已通过 15 关

32

靛6879

已通过 15 关

33

君不见8861

已通过 15 关

34

码友4817845

已通过 15 关

35

学号:2165976

已通过 15 关

36

6253

已通过 15 关

37

码友4817853

已通过 15 关

38

2026

已通过 15 关

39

码友4819003

已通过 15 关

40

JX3619

已通过 15 关

41

张8401

已通过 15 关

42

池鱼7684

已通过 15 关

43

1684

已通过 15 关

44

4434

已通过 15 关

45

码友4817854

已通过 14 关

46

蒙大大

已通过 14 关

47

火狐狸2388

已通过 13 关

48

4582

已通过 13 关

49

2337

已通过 13 关

50

8692

已通过 12 关

51

1592

已通过 12 关

52

star xia

已通过 12 关

53

小艾3892

已通过 12 关

54

thunder3801

已通过 11 关

55

学号:4808935

已通过 11 关

56

7200

已通过 11 关

57

Lost.

已通过 11 关

58

8205

已通过 11 关

59

4680

已通过 11 关

60

哈力9506

已通过 10 关

61

亽心惶惶i

已通过 10 关

62

安稚

已通过 10 关

63

2119

已通过 10 关

64

学号:4820133

已通过 10 关

65

7464

已通过 10 关

66

A-合肥昕杰

已通过 9 关

67

6679

已通过 9 关

68

阿白4601

已通过 9 关

69

学号:1920953

已通过 9 关

70

8270

已通过 8 关

71

o4927

已通过 8 关

72

4784

已通过 8 关

73

Lin3545

已通过 8 关

74

学号:4675103

已通过 8 关

75

2886

已通过 8 关

76

5459

已通过 8 关

77

学号:4765525

已通过 8 关

78

6838

已通过 7 关

79

Come4043

已通过 7 关

80

5892

已通过 7 关

81

学号:3131448

已通过 7 关

82

4091

已通过 7 关

83

7523

已通过 6 关

84

7650

已通过 6 关

85

学号:294368

已通过 6 关

86

7406

已通过 6 关

87

5330

已通过 6 关

88

学号:3944524

已通过 6 关

89

微信用户3670

已通过 6 关

90

NK橘辰

已通过 5 关

91

七夕青蛙3949

已通过 5 关

92

4863

已通过 5 关

93

一寻

已通过 5 关

94

6596

已通过 5 关

95

Stewie2508

已通过 5 关

96

8022

已通过 5 关

97

4662

已通过 5 关

98

3394

已通过 5 关

99

4670

已通过 5 关

100

5497

已通过 5 关