基础
一、开启grid布局
//css
.father {
display: grid;
}
//html
<div class="father">
<div style="background-color: red;">1</div>
<div style="background-color: yellow;">2</div>
<div style="background-color: gray;">3</div>
<div style="background-color: blue;">4</div>
<div style="background-color: green;">5</div>
</div>
效果:
当给父级容器设置了width和height后,grid布局会拉伸子元素填满父容器(其实是各自的网格):
.father {
display: grid;
width: 500px;
height: 500px;
}
效果:
二、grid-template-columns设置列宽
父元素中:grid-template-columns属性(设置每一列宽度)
.father {
display: grid;
grid-template-columns: 50px 100px 150px;
//grid-template-columns: 50px 100px 150px 200px 20px;
}
效果1
效果2
三、特有的fr单位
.father {
display: grid;
grid-template-columns: 1fr 1fr;//2列,宽:1/2, 1/2
}
同理:
.father {
display: grid;
grid-template-columns: 1fr 1fr 2fr;//3列,宽:1/4, 1/4, 2/4
}
四、gap(row-gap和column-gap)设置行、列间距
.father {
display: grid;
grid-template-columns: 1fr 1fr 2fr;//3列:1/4, 1/4, 1/2
gap: 10px 30px;//行 列
}
这里如果 列宽 非常大 (gap:10px 500px),首先会挤压子元素的content,最小为子元素里面内容的宽度,然后底部会出现滚动条。(父宽度-所有的列宽后的剩余空间来分配给元素,这里为1:1:2),单看grid布局的每一行的height是相同的,单看grid布局每一列的width是相同的
这一行所有的height都被撑开:
这一列所有的width都被撑开:
五、grid-template-areas自定义布局
实现以下布局: 左边sidebar占1/3,右边content占2/3
//html
<div style="width: 500px; height: 500px;">
<div class="father">
<header>头部</header>
<aside>侧边栏</aside>
<main>内容</main>
<footer>底部</footer>
</div>
</div>
//css
.father {
display: grid;
grid-template-areas: "header header header"
"sidebar content content"
"footer footer footer";
//grid布局区域就会如上来划分,这些都是自定义的名字来划分
}
header {
grid-area: header;//绑定到父级中对应的划分
background-color: red;
}
main {
grid-area: content;//绑定到父级中对应的划分
background-color: yellow;
}
aside {
grid-area: sidebar;//绑定到父级中对应的划分
background-color: blue;
}
footer {
grid-area: footer;//绑定到父级中对应的划分
background-color: aqua;
}
效果:
六、设置对齐
网格布局:就是将区域首先划分为一个个网格,然后控制各个子元素在各个网格中的位置(子元素<=网格), items是子元素,content是网格整体
1.align-items和align-content纵向
值:start/center/end/等
.father {
display: grid;
align-items: start; //单个网格中,子元素竖直方向靠上(子元素不再填充网格,挤压子元素)
width: 500px;
height: 500px;
}
虚线为网格,红色为子元素
align-items: center
align-items: end
上面align-items控制的是元素在网格中的位置,使用align-content来控制整个网格:
align-content: start
2.justify-items和justify-content横向
值:start/center/end
同理,items控制单个元素,content控制网格整体(压缩网格)
justify-items:start/center/end
使用justify-content: start
.father {
display: grid;
justify-content: start; //content压缩网格,注意观察网格线
width: 500px;
height: 500px;
}
align-items和justify-items设置center:
align-items和justify-content设置center:
align-content和justify-items设置center:
align-content和justify-content设置center: