Grid⽹格布局容器属性与⼦项属性Grid实现⾃适应三栏布局Grid ⽹格布局
⽹格布局是最强⼤的CSS布局⽅案，将⽹页划分成⼀个个⽹格
可以任意组合不同的⽹格，做出各种各样的布局
⽹格布局与弹性布局有⼀定的相似性，都可以指定容器内部多个项⽬的位置，
但是也存在重⼤区别
1.1 和flex布局的区别:
grid容器⼦项是单元格，⽽⾮⼦元素(当然，如果⼦元素没有设置宽⾼，那么他的宽⾼跟随单元格，值得⼀提的是，⼦元素样式calc函数的100%也是相对于单元格⽽⾮容器元素)，⽽flex容器的⼦项直接即是⼦元素
Flex布局是轴线布局，只能指定"项⽬"针对轴线的位置，是⼀维布局
grid将容器划分成⾏和列，产⽣单元格，然后指定项⽬所在单元格，可以看作是⼆维布局
1.2 基本概念
容器和项⽬：即容器结点和⼦节点
⾏和列：⽔平区域/垂直区域
单元格：⾏和列的交叉区域，n⾏m列会产⽣n×m个单元格
⽹格线：划分⽹格的线，⽔平⽹格线和垂直⽹格线分别决定了⾏和列，n⾏有n+1根⽹格线
1.3 容器属性
Grid项⽬指⼦节点，不包含孙⼦节点，Grid⼦项(单元格)默认都是块级元素
和flex布局⼀样，Grid布局不影响容器之外的元素
设置Grid布局以后，容器⼦项的float、display等属性失效
指定⽹格布局：display:grid
1.3.1 指定块级容器和⾏内容器
display:grid
display:inline-grid
1.3.2 列宽和⾏⾼
容器指定了⽹格布局以后，接着就要划分⾏和列
grid-template-columns: 每列列宽, 是设置⼦项(单元格)的属性，⽽不是⼦元素宽⾼，但是可以⽤calc函数相对于⽗元素做⼦元素计算
grid-template-rows：每⾏⾏⾼
有时候重复的值很多，写起来很⿇烦，这时，可以使⽤repeat函数，简化重复的值
简写：
grid-template-columns:repeat(3, 33, 33%) 三列均分布局
grid-template-rows:repeat(3, 33.33%) 每⾏⾏⾼为33.33%
<style>
.wrapper {
height: 500px;
width: 600px;
display: grid;
background: lightseagreen;
/*  定义列宽。指的是⼦项(单元格)的宽度，⽽⾮⼦元素的宽度*/
grid-template-columns: repeat(3, 200px);
/* 定义每⾏⾏⾼ */
grid-template-rows: 100px 100px 100px;
/* repeat(3,200px) equals to 200px 200px 200px  */
}
.child {
width: 100px;
height: 100px;
background: lightsalmon;
font-size: 12px;
}
</style>
<body>
<div class="wrapper">
<div class="child"><span>grandchild</span></div>
<div class="child"><span>grandchild</span></div>
<div class="child"><span>grandchild</span></div>
</div>
</body>
1.3.3 ⾃动填充 auto-fill关键字
有时候，单元格⼤⼩固定，但是容器的⼤⼩不固定，可以⽤这个属性包含尽可能多的列
即：不指定容器的列数，只指定容器的列宽，具体⼀⾏多少列数，由容器宽来做⾃适应，尽可能容纳更多的列数    <style>
.container{
css实现三列布局width: 430px;
height: 500px;
background: lightseagreen;
display: grid;
grid-template-columns: repeat(auto-fill,100px);
grid-template-rows: repeat(3 200px);
gap: 10px;
}
.item{
width: 100px;
height: 100px;
background: lightsalmon;
}
</style>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
1.3.4 ⽐例关系 fr关键字
有时候为了⽅便表⽰⽐例关系，grid布局提供了fr关键字(fraction, ⽚段)
如果两列的宽分别为1fr 和 2fr 那么前者是后者的两倍
如果全是1fr, 表⽰均分
如果是100px 1fr 2fr, 则表⽰第⼀列100px, 剩下均分，但是第⼆列是第三列的1/2
<style>
.container{
width: 530px;
height: 500px;
background: lightseagreen;
display: grid;
/* 4个单元格均分容器宽 */
/* grid-template-columns: repeat(4,1fr); */
/* 第⼀列宽200px，剩下3列均分剩余容器宽 */
grid-template-columns: 200px repeat(3,1fr);
grid-template-rows: repeat(3 200px);
gap: 10px;
}
.item{
/* 这个100%是相对于单元格，⽽⾮容器 */
width: calc(100% - 10px);
height: 100px;
background: lightsalmon;
}
</style>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
1.3.5 长度范围 minmax
minmax指定长度范围，如指定第⼀列列宽不⼩于100px不⼤于200px
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>
</head>
<style>
.container{
width: 530px;
height: 500px;
background: lightseagreen;
display: grid;
/* 指定宽度范围，实际宽度190px，按最⼤情况处理，剩下fr均分 */            grid-template-columns: minmax(100px,200px) repeat(3,1fr);
grid-template-rows: repeat(3 200px);
gap: 10px;
}
.item{
/* 这个100%是相对于单元格，⽽⾮容器 */
width: calc(100% - 10px);
height: 100px;
background: lightsalmon;
}
</style>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
1.3.6 Grid实现两栏布局和三栏⾃适应布局
三栏布局，中间⾃适应, 将左右两栏写死，中间设置1fr⾃动分配即可
<style>
body,
html {
width: 100%;
height: 100%;
/* 去掉滚动条 */
margin: 0;
}
.container {
width: 100%;
height: 100%;
background: lightseagreen;
display: grid;
/
* 两栏布局 */
/* grid-template-columns: 70% 30%; */
/* 三栏布局，中间⾃适应，将左右两栏写死，中间设置1fr⾃适应分配即可 */        grid-template-columns: 100px 1fr 200px;
/*不写默认是100%,⼦元素默认撑满单元格⾼度 */
/* grid-template-rows: 100px; */
}
.left {
background: skyblue;
}
.right {
background: rebeccapurple;
}
.con {
background: orange;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="con"></div>
<div class="right"></div>
</div>
</body>
1.3.7 grid间隔
grid-row-gap：设置⾏间隔
grid-column-gap：设置列间隔
grid-gap: 设置⾏间隔于列间隔
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container{
width: 530px;
height: 500px;
background: lightseagreen;
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 10px 10px;
}
.item{
background: lightsalmon;
}
</style>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
1.3.8 grid-auto-flow属性
通过grid-template-columns和grid-template-rows设置好⾏列，确定好单元格之后可以⽤grid-auto-flow来决定⼦元素是先填满⾏还是先填满列
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container {
width: 930px;
height: 900px;
background: lightseagreen;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px 10px;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。