常见页面布局的Grid布局实现

练习一下Grid布局

关于Grid布局的相关概念与属性可以看看之前的一篇总结 - Grid布局学习

某些网络情况下也许不能正常显示嵌入的codepen demo

居中

水平居中

使用网格元素的justify-self属性,设为center即可

See the Pen common-layout-schema-grid-01 by yrq110 (@yrq110) on CodePen.

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
background: #eee;
}
.parent {
background: grey;
justify-self: center;
}
.child {
font-size: 30px;
}

垂直居中

使用网格元素的align-self属性,设为center即可

See the Pen common-layout-schema-grid-02 by yrq110 (@yrq110) on CodePen.

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: 200px;
background: #eee;
}
.parent {
background: grey;
align-self: center;
}
.child {
font-size: 30px;
}

水平垂直居中

同时使用justify-selfalign-self属性

See the Pen common-layout-schema-grid-03 by yrq110 (@yrq110) on CodePen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: 200px;
background: #eee;
}
.parent {
background: grey;
justify-self: center;
align-self: center;
}
.child {
font-size: 30px;
}

多列

一列定宽,一列自适应

通过grid-template-columns显式定义网格列尺寸,使用fr自适应长度单位

See the Pen common-layout-schema-grid-04 by yrq110 (@yrq110) on CodePen.

1
2
3
4
5
6
7
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 1fr;
grid-gap: 20px;
background: #eee;
}

多列定宽,一列自适应

同样通过grid-template-columns属性定义,添加新增的定宽的尺寸即可,方便起见这里使用了repeat()方法

See the Pen common-layout-schema-grid-05 by yrq110 (@yrq110) on CodePen.

1
2
3
4
5
6
7
.container {
display: grid;
grid-template-columns: repeat(2, 200px) 1fr;
grid-template-rows: 1fr;
grid-gap: 20px;
background: #eee;
}

一列不定宽,一列自适应

可将不定宽的网格列尺寸设为auto

See the Pen common-layout-schema-grid-06 by yrq110 (@yrq110) on CodePen.

1
2
3
4
5
6
7
8
9
10
11
.container {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto;
grid-gap: 20px;
background: #eee;
}
.left p {
width: 200px;
margin: 0;
}

多列不定宽,一列自适应

参考上面的几个情况

See the Pen common-layout-schema-grid-07 by yrq110 (@yrq110) on CodePen.

1
2
3
4
5
6
7
8
9
10
11
.container {
display: grid;
grid-template-columns: repeat(2, auto) 1fr;
grid-template-rows: auto;
grid-gap: 20px;
background: #eee;
}
.left p, .center p{
width: 200px;
margin: 0;
}

等分

网格单元均使用fr自适应长度单位即可,会将自由空间根据所设比例自动划分(类似flex布局中的flex属性)

See the Pen common-layout-schema-grid-08 by yrq110 (@yrq110) on CodePen.

1
2
3
4
5
6
7
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 20px;
background: #eee;
}

综合

瀑布流

多列等宽

See the Pen common-layout-schema-grid-10 by yrq110 (@yrq110) on CodePen.

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
html, body {
width: 100%; height: 100%;
margin: 0px; padding: 0;
}
.container {
display: grid;
padding: 10px;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 50px;
grid-auto-flow: row;
grid-gap: 20px;
background: #eee;
}
.small {
grid-column: auto / span 1;
grid-row: auto / span 2;
}
.medium {
grid-column: auto / span 1;
grid-row: auto / span 4;
}
.big {
grid-column: auto / span 1;
grid-row: auto / span 6;
}
.container > div {
background: grey;
font-size: 30px;
}

多列不等宽

See the Pen common-layout-schema-grid-09 by yrq110 (@yrq110) on CodePen.

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
html, body {
width: 100%; height: 100%;
margin: 0px; padding: 0;
}
.container {
display: grid;
padding: 10px;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 50px;
grid-auto-flow: dense;
grid-gap: 20px;
background: #eee;
}
.small {
grid-column: auto / span 2;
grid-row: auto / span 2;
}
.medium {
grid-column: auto / span 4;
grid-row: auto / span 4;
}
.big {
grid-column: auto / span 6;
grid-row: auto / span 6;
}
.container > div {
background: grey;
font-size: 30px;
}

其他

比如圣杯与双飞燕等布局,均可以通过显式网格定义中的grid-template-areas属性结合网格项目的grid-area属性实现

参考

文章目录
  1. 1. 居中
    1. 1.1. 水平居中
    2. 1.2. 垂直居中
    3. 1.3. 水平垂直居中
  2. 2. 多列
    1. 2.1. 一列定宽,一列自适应
    2. 2.2. 多列定宽,一列自适应
    3. 2.3. 一列不定宽,一列自适应
    4. 2.4. 多列不定宽,一列自适应
    5. 2.5. 等分
  3. 3. 综合
    1. 3.1. 瀑布流
      1. 3.1.1. 多列等宽
      2. 3.1.2. 多列不等宽
    2. 3.2. 其他
  4. 4. 参考
|