简单使用gridlayout
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;
}
轉載于:https://www.cnblogs.com/BOGY/p/9693122.html
總結
以上是生活随笔為你收集整理的简单使用gridlayout的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 解决intellij IEDA mapp
- 下一篇： node实现爬取当前页面链接实现