Grid网站布局

CSS Grid为我们提供了功能强大的网站布局系统

常用相关属性

  • display(对于grid值)
  • grid-template-columns
  • grid-gap
  • grid-auto-flow
  • grid-column / grid-row

最终实现效果

小屏,中屏

中小屏

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
body {
font-family: Arial, sans-serif;
}

header,
footer {
padding: 25px 0;
}

header,
footer,
nav {
margin: 20px 0;
}

header,
footer {
background-color: orange;
}

section {
padding: 10px;
}

nav li {
background-color: black;
padding: 10px;
}

nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.item {
padding: 0;
background-color: white;
}

.item-type-a {
padding-top: 45%;
background-color: orange;
}

.item-type-b {
padding-top: 45%;
background-color: orange;
}

.item-inner {
padding: 25px 0;
background-color: black;
}

.container-main{
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 20px;
}

.container-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}

.container-nav {
display: grid;
grid-gap: 5px;
}

.item {
grid-column: span 6;
}
.item-inner {
grid-column: span 3;
}

@media screen and (min-width: 600px) {
body {
width: 80%;
margin: 0 auto;
}
.container-nav {
grid-auto-flow: column;
}

.item-type-b {
grid-column: span 3;
}
.item-inner {
grid-column: span 1;
}
}
@media screen and (min-width: 900px) {
.container-main {
grid-auto-flow: column;
}
.item {
grid-column: span 2;
grid-row: span 2;
}
.item-type-b {
grid-row: span 1;
}
.item-inner {
grid-column: span 3;
}
}

CSS Grid支持以下其他用例:

  • 我们希望制作更少的规格,以便更多地依赖自动定位。

  • 我们想要制定更多规格,以便确定最终布局的更多细节。

    如果第一种情况适用,则值得考虑以下其他网格选项:

  • 当创建网格grid-template-columns,你可以有网格系统自动确定各列的宽度与自动关键字或它的设置适应现有的内容min-content,max-content或者fit-content。

  • 您可以让网格系统自动确定的帮助下所需的列数repeat,auto-fill,auto-fit,和minmax。甚至媒体查询也可能变得多余,并且这些工具无需增加更多媒体查询就可以使事情变得灵活

完整代码

github

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!

请我喝杯咖啡吧~

支付宝
微信