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

码友4797116

已通过 83 关

哈力9506

已通过 82 关

2257

已通过 79 关

4

5220

已通过 54 关

5

学号:4031030

已通过 47 关

6

枫中零落

已通过 26 关

7

4586

已通过 21 关

8

1409

已通过 21 关

9

易菊香

已通过 20 关

10

3810

已通过 20 关

11

修行者-埃文

已通过 19 关

12

6317

已通过 19 关

13

码友4798995

已通过 16 关

14

GeekLuo

已通过 15 关

15

3109

已通过 15 关

16

12385170281

已通过 15 关

17

码友4799084

已通过 15 关

18

学号:4797730

已通过 15 关

19

7446

已通过 15 关

20

打烊勿扰

已通过 15 关

21

2748

已通过 15 关

22

学号:4797132

已通过 15 关

23

摋7068

已通过 14 关

24

学号:4056123

已通过 13 关

25

码友4797169

已通过 13 关

26

ellire

已通过 12 关

27

8849

已通过 11 关

28

2809432

已通过 11 关

29

蓝图1348

已通过 10 关

30

呼7185

已通过 10 关

31

学号:4796554

已通过 8 关

32

7755

已通过 8 关

33

德芙dfu

已通过 8 关

34

2315

已通过 8 关

35

2910

已通过 7 关

36

RE017541

已通过 7 关

37

蒙大大

已通过 6 关

38

1802

已通过 6 关

39

程序羊

已通过 5 关

40

7171

已通过 5 关

41

All My People

已通过 5 关

42

6703

已通过 5 关

43

Zhaohua

已通过 5 关

44

9396

已通过 5 关

45

学号:4406750

已通过 5 关

46

如果你还没有睡9084

已通过 5 关

47

4555

已通过 5 关

48

耀耀大王

已通过 5 关

49

3450

已通过 5 关

50

4849

已通过 4 关

51

微信用户9879

已通过 4 关

52

9101

已通过 4 关

53

学号:4794042

已通过 4 关

54

3633

已通过 4 关

55

苹果不太甜_

已通过 4 关

56

4558

已通过 4 关

57

prolove2031

已通过 4 关

58

9134

已通过 3 关

59

3553

已通过 3 关

60

4802

已通过 3 关

61

学号4224678

已通过 3 关

62

oo從兲絳

已通过 3 关

63

1603

已通过 3 关

64

6676

已通过 3 关

65

6185

已通过 3 关

66

学号:4799714

已通过 2 关

67

3606

已通过 2 关

68

学号:4798355

已通过 2 关

69

8931

已通过 2 关

70

9931

已通过 2 关

71

6822

已通过 2 关

72

　　　　　　　　9237

已通过 2 关

73

朱世奔

已通过 2 关

74

2423

已通过 2 关

75

微信用户4790

已通过 2 关

76

微信用户3670

已通过 1 关

77

6457

已通过 1 关

78

9240

已通过 1 关

79

妙哉

已通过 1 关

80

不支持蓝牙

已通过 1 关

81

1629

已通过 1 关

82

不想再遗忘

已通过 1 关

83

未来可期5183

已通过 1 关

84

莫雨千秋

已通过 1 关

85

我想养只狗

已通过 1 关

86

9062

已通过 1 关

87

97V

已通过 1 关

88

学号:4306515

已通过 1 关

89

梦幻之行

已通过 1 关

90

6502

已通过 1 关

91

9635

已通过 1 关

92

6764

已通过 1 关

93

不不想看

已通过 1 关

94

6596

已通过 1 关

95

学号:4325012

已通过 1 关

96

Tamaru

已通过 1 关

97

、飞龙

已通过 1 关

98

9964

已通过 1 关

99

Baracks

已通过 1 关

100

学号:3854854

已通过 1 关