一种新的自适应布局方式 display:grid
分享一种新的布局方式,display: grid,用来解决一些卡片统计等布局问题,例如
达成这种卡片布局的效果,使用grid布局只要三行代码就能搞定
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>display: grid 的使用</title>
<style>
.box {
width: 1600px;
margin: 50px auto;
height: 100px;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-column-gap: 80px;
}
.box div {
border-radius: 4px;
box-shadow: 2px 2px 5px #ccc;
background: orange;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
效果图(复制代码可查看)
而实现这种效果只需要三行主要代码
display: grid;
grid-template-columns: repeat(4,1fr);
grid-column-gap: 80px;
grid 主要属性:
属性 | 作用 | 参数 |
---|---|---|
grid-template-columns | 给grid元素内的子元素设置每行的限制和样式 | 像素 / fr / repeat |
grid-template-rows | 给grid元素内的子元素设置每列的限制和样式 | 像素 / fr / repeat |
grid-row-gap | 给grid元素内的子元素设置行间距 | 像素 / 百分比 |
grid-column-gap | 给grid元素内的子元素设置列间距 | 像素 / 百分比 |
grid-gap | grid-column-gap和grid-row-gap的合并简写形式 | grid-gap: grid-row-gap grid-column-gap |
justify-items | 子元素单元格内容的水平位置 | start(左) / end(右) / center(中) / stretch(拉伸) |
align-items | 子元素单元格内容的垂直位置 | start(上) / end(下) / center(中) / stretch(拉伸) |
place-items | align-items属性和justify-items属性的合并简写形式 | place-items: align-items justify-items |
1.fr:将子元素平均分成一样的长度或宽度,比如两列的宽度分别为1fr和2fr,就表示后者是前者的两倍
2.repeat:是一个函数,接受两个参数,第一个参数是重复的次数(本例中是4),第二个参数是所要重复的值,重复某种模式也是可以的
比如:repeat(2, 1fr 2fr 1fr)
在本例中只使用了 grid-template-columns 和 grid-column-gap,定义了一行展示4个子元素,每个子元素长度平均分,间距80px
还有一些特殊属性表格中没有列出,只要掌握表格中的属性就可以简单的搭建出一些样式,就这样吧