grid

时间 2019-11-19

标签 grid 繁體版

原文原文链接

<<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>gridlay</title>

<link rel="stylesheet" href="gid.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>

.wrapper {/*wrapper对在全部在这个区间的单位起做用*/

display: grid;

grid-template-columns: repeat(3, 1fr);/*表示区间内列表重复的片断容许大量表现出以更紧凑的形式被写入的重复图案的列或行的。*/

grid-gap: 10px;/*方块之间的间距*/

grid-auto-rows: minmax(100px, auto);/*定义方块大小*/

}

.one {/*定义该表格的属性*/

grid-column: 1 / 3;/*表示占用1/3个屏幕百分比*/

grid-row: 1;/*表示指定的隐含建立的网格行的轨道的大小*/

background-color: blue;/*背景色*/

}

.two { /*定义该表格的属性*/

grid-column: 2 / 4;/*表示的隐含建立的网格列的大小轨道*/

grid-row: 1 / 3;/*表示指定的隐含建立的网格行的轨道的大小*/

background-color: blueviolet;/*背景色*/

}

.three {/*定义该表格的属性*/

grid-column: 1;/*表示的隐含建立的网格列的大小轨道*/

grid-row: 2 / 5;/*表示指定的隐含建立的网格行的轨道的大小*/

background-color: rgb(0, 255, 149);/*背景色*/

}

.four {/*定义该表格的属性*/

grid-column: 3;/*表示的隐含建立的网格列的大小轨道*/

grid-row: 3;/*表示指定的隐含建立的网格行的轨道的大小*/

background-color: rgb(55, 0, 255);/*背景色*/

}

.five {/*定义该表格的属性*/

grid-column: 2;/*表示的隐含建立的网格列的大小轨道*/

grid-row: 4;/*表示指定的隐含建立的网格行的轨道的大小*/

background-color: rgba(0, 0, 255, 0.171);/*背景色*/

}

.six {/*定义该表格的属性*/

grid-column: 3;/*表示的隐含建立的网格列的大小轨道*/

grid-row: 4;/*表示指定的隐含建立的网格行的轨道的大小*/

background-color: rgb(30, 255, 0);/*背景色*/

}

相关文章

相关标签/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公众号

欢迎关注本站公众号,获取更多信息

相关文章

>>更多相关文章<<