简单使用gridlayout

最新推荐文章于 2022-06-08 10:15:47 发布

donghang5989

最新推荐文章于 2022-06-08 10:15:47 发布

阅读量111

点赞数

原文链接：http://www.cnblogs.com/BOGY/p/9693122.html

版权

html部分

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="GridLayout.css">
</head>
<body>
<div class = "wrapper">
<div class = "one">one</div>
<div class = "two">two</div>
<div class = "three">three</div>
<div class = "four">four</div>
<div class = "five">five</div>
<div class = "six">six</div>
</div>
</body>
</html>

css部分

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);/*使用repeat()可以创建重复的网格轨道。
　　　　　　　　　　　　　　　　这个适用于创建相等尺寸的网格项目和多个网格项目。
　　　　　　　　　　　　　　　　repeat()接受两个参数：
　　　　　　　　　　　　　　　　第一个参数定义网格轨道应该重复的次数，
　　　　　　　　　　　　　　　　第二个参数定义每个轨道的尺寸。
　　　　　　　　　　　　　　　　fr单位可以帮助我们创建一个弹列的网格轨道,
　　　　　　　　　　　　　　　　它代表了网格容器中可用的空间*/
grid-gap: 10px;/*grid-gap是grid-row-gap和grid-column-gap两个属性的缩写，
　　　　　　　如果它指定了两个值，那么第一个值是设置grid-row-gap的值，
　　　　　　　第二个值设置grid-column-gap的值。如果只设置了一个值，
　　　　　　　表示行和列的间距相等，也就是说grid-row-gap和grid-column-gap的值相同*/
grid-auto-rows: minmax(100px, auto);/*minmax()函数创建网格轨道的最小或最大尺寸
　　　　　　　　　　　　　　　　　minmax()函数接受两个参数：
　　　　　　　　　　　　　　　　　第一个参数定义网格轨道的最小值，
　　　　　　　　　　　　　　　　　第二个参数定义网格轨道的最大值。
　　　　　　　　　　　　　　　　　可以接受任何长度值，也接受auto值。
　　　　　　　　　　　　　　　　　auto值允许网格轨道基于内容的尺寸拉伸或挤压*/
}
.one {
grid-column: 1 / 3;/*grid-row是grid-row-start和grid-row-end的简写

　　　　　　　　grid-column是grid-column-start和grid-column-end的简写

　　　　　　　　如果只提供一个值，则指定了grid-row-start(grid-column-start)值*/

grid-row: 1;
background: red;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
background: orange;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
background: blue;
}
.four {
grid-column: 3;
grid-row: 3;
background: black;
}
.five {
grid-column: 2;
grid-row: 4;
background: purple;
}
.six {
grid-column: 3;
grid-row: 4;
background: green;
}