CSS布局神器：grid
如果说以前的⽂档流布局是⼀维布局的话，那么grid我们可以把它理解成⼆维布局css布局左边固定右边自适应
以前的布局是从上到下，从左到右的⽂档流布局，也就是BFS
grid将改变这种布局⽅式
grid的基本概念其实就是在⽗元素⾝上挖坑，然后⽤⼦元素去填。
1 创建单元格
1.1 ⾏列
1. display: grid;
2. 先分⾏，后分列
1. grid-template-columns
2. grid-template-rows
grid-template-columns: 100px 40% 100px;
grid-template-rows: 100px 100px;
3. 中间设置百分⽐课随⽗级⾃由变换，两边像素单位则不变
1.2 特殊单位fr
grid-template-columns：1fr 1fr 1fr; 这样便是把box分成了三列
每⼀列的宽度都占box宽度的3分之⼀，为什么是三分之⼀呢？ 因为有3个fr
1.3 重复值函数：repeat(4, 1fr);
前⾯写重复次数，后⼀个值为每个轨道的宽度
1.4 auto-fill 关键字
在单元格的⼤⼩是固定的，但是⽗级的⼤⼩不确定的时候，如果希望⽗级每⼀⾏或每⼀列容纳尽可能多的单元格，这时可以使⽤auto-fill关键字表⽰⾃动填充
.container{
display: grid;
grid-template-columns:repeat(auto-fill, 100px);
}
意思就是当⽗级宽度改变后，内部的⾏列会⾃适应改变，类似于浮动当不确定多少⾏列的时候可⽤这个关键字
1.5 auto 关键字
表⽰由浏览器⾃⼰决定宽度或者⾼度
display: grid;
width: 1000px;
grid-template-columns: 200px auto 200px;
1.7 grid-auto-columns 和 grid-auto-rows
设置⽹格之外的元素的⾼度
2 单元格合并 (设置给⼦集)
⽹格线
2.1 合并列
grid-column-start: 1; 开始合并的列 从⽗级最左边开始算
grid-column-end: 4; 结束合并的列
复合：grid-column: 2 / 4; 开始合并的列和结束合并的列
合并⾏
grid-row-start: 1；开始合并的⾏
grid-row-end: 4；结束合并的列
grid-row: 2 / 4; 开始合并的列和结束合并的列
span 关键字
定义要合并的数量
如: grid-column: 2 / span 3; 从第⼆列开始合并，往后合并三列grid-template-areas属性（⽤命名的⽅式合并⾏与列）
.container{
.main{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas:'a s d'
'a e f'
'a h i';
}
.item{
border: 1px solid #0c5460;
text-align: center;
}
.item::after{
content:attr(data-num);
font: 20px/24px '微软雅⿊';
}
.item::before{
content:'';
display: inline-block;
vertical-align: middle;
font: 20px/24px '微软雅⿊';
height: 100%;
}
合并三个后要删去多余的两个
<div class="main">
<div class="item"data-num="1"></div>
<div class="item"data-num="2"></div>
<div class="item"data-num="3"></div>
<div class="item"data-num="4"></div>
<div class="item"data-num="5"></div>
<div class="item"data-num="6"></div>
<div class="item"data-num="7"></div>
<div class="item"data-num="8"></div>
<div class="item"data-num="9"></div>
</div>
合并同名区域，其他区域将往后挤(设置给⼦集)
.item:nth-child(3){
grid-area: a;
}
3 单元格对齐⽅式
3.1 justify-items 和 align-items 针对单⾏调整⼦元素在主轴⽅向上的对齐⽅式
start
end
center
3.2 justify-content 和 align-content 针对多⾏
定义元素对齐⽅式：
normal
start ：从⽗级左边开始，类似于normal
end ：从⽗级右边开始，相当于整体有浮动（不改变顺序）
center ：⽔平居中
space-around ：环绕
space-between ：左中右

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