文章目录
grid布局
传统布局, flex布局, grid布局的比较
1.1 grid-template-rows
<div class="parent">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
.parent {
width: 500px;
height: 500px;
background: pink;
display: grid;
grid-template-rows: 100px 200px 100px 50px 50px;
}
.item {
border: 2px solid greenyellow;
color: #fff;
text-align: center;
font-size: 20px;
}
使用fr单位
grid-template-rows: 1fr 2fr 1fr 3fr 3fr;
fr单位是一个自适应单位,用来分割剩余的空间。如果剩余空间被设置为1fr 2fr 那么1fr就占整个剩余空间的1/3 2fr占整个剩余空间的2/3
1.2 grid-template-columns
grid-template-row
配合 grid-template-column
配合时,由grid-template-column
决定分隔成的列数,grid-template-column
设置每列的高度
grid-template-rows: 50px 100px 60px;
grid-template-columns: 1fr 2fr 1fr
分割成三列,虽然行数被分割成了3行,但是由于没有足够多的item,所以只使用到了50px 100px
1.3 行或列最小和最大尺寸 minmax()
使用minman()来创建行或列的最小最大尺寸,第一个参数是最小值,第二个参数是最大值。
.parent {
padding: 20px;
width: 500px;
height: 500px;
background: pink;
display: grid;
grid-template-rows: minmax(100px, 200px) minmax(50px, 600px);
grid-template-columns: 1fr 3fr 2fr;
}
minmax的计算规则
由于rows决定的是每一列的高度,所以我们需要将其与盒子的总高度进行比较
- height > max1Height + max2Height, 取值max1Height, max2Height
- height < min1Height + min2Height,取值min1Height, min2Hight
- height < max1Height + max2Height 如上 500px < 200px + 600px
用 height - min1Height - min2Height = 500px - 100px - 50px = 350px
Height1 = 100px + 350px / 2
Height2 = 50px + 350px / 2
1.4 重复列或重复行 repeat(2, 100px)
repeat() 创建重复的网格轨道。 接收两个参数,第一个参数是网格轨道的次数,第二个参数定义每个轨道的尺寸。
<div class="parent">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div
.parent {
padding: 20px;
width: 500px;
height: 500px;
background: pink;
display: grid;
grid-template-rows: repeat(2, 100px);
grid-template-columns: repeat(3, 100px);
}
.item {
border: 2px solid greenyellow;
color: #fff;
text-align: center;
font-size: 20px;
}
1.5 间距 grid-gap
grid-column-gap 列之间的间距
grid-row-gap 行之间的间距
grid-gap grid-row-gap grid-column-gap
grid-column-gap: 10px;
grid-row-gap: 50px;
如图, 列与列之间的间隔为10px, 行与行之间的间距为50px
1.6 使用网格线定位grid item
.item1 {
grid-row-start: 2;
grid-row-end: 3;
grid-column: 1;
grid-column-end: 2;
background: yellow;
}
如上,给item1进行定位。显示效果如图
- 缩写 grid-column: 3 / 4 需用 / 分割开
grid-row grid-row-start grid-row-end
grid-column grid-column-start grid-column-end
如果只指定了一个值,那么就是grid-row/column-start的值
- 四个属性的缩写 grid-area grid-row-start grid-column-start grid-row-end grid-column-end
上例中可以缩写为
-
grid-row: 2 / 3; grid-column: 1 / 2
-
grid-area: 2 / 1 / 3 / 2
1.7 合并单元行和单元列 定义在grid-item中
.item1 {
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 3;
background: yellow;
}
- 另一种写法
grid-row: 1 / span 2;
grid-column: 1 / span 3;
1.8 grid-template-area
网格线定义网格区域
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0px;
padding: 0px;
}
.parent {
padding: 20px;
background: pink;
display: grid;
text-align: center;
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-template-rows: 150px 300px 150px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas : "header header header "
"sidebar content content "
"footer footer footer ";
}
.header {grid-area: header;background: #ffffff}
.sidebar{grid-area: sidebar; background: blue}
.content {grid-area: content; background: yellowgreen}
.footer {grid-area: footer; background: plum}
</style>
</head>
<body>
<div class="parent">
<div class="header">header</div>
<div class="sidebar">sidebar</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</body>
</html>