前端常见的布局⽅式——⽹格布局
⼀、⽹格布局
1、常规情况
html代码
<div class="container">
<div class="text">1asdasdasdas
adasdasdasdasdasdasdasdasdasdqweqweqwewqe
qweqweqweqweqweqweqwdasdasdasdasd</div>
<div class="tet">2dasdas</div>
<div class="text">3dasda</div>
<div class="text">4adsdqw</div>
<div class="text">5qweqwe</div>
<div class="text">6啊发顺丰</div>
<div class="text">7qasd安达市⼤所⼤e</div>
<div class="text">8阿斯顿撒⼤所⼤所we</div>
</div>
设置主容器
.container{
display: grid;
border: blue 1px solid;
grid-template-columns: repeat(4,1fr);
/*grid-template-rows: 20rem 20rem ;*/
grid-auto-rows: minmax(30px,auto);
grid-row-gap: 5rem;
grid-column-gap: 5rem;
text-align: center;
}
设置⼦容器
/*:nth-child(n) 选择器匹配属于其⽗元素的第 N 个⼦元素，不论元素的类型。>后⾯有⽆.text毫⽆影响*/
.container > :nth-child(even){
background-color: #d44950;
}
.text{
/
*display: inline-grid;*/
border: red 1px solid;
background-color: #8c939d;
}
.tet{
display: inline-grid;
border: red 1px solid;
background-color: sandybrown;
}
产⽣的效果
2、嵌套
只需要在html页⾯⼦容器内再嵌套相应的代码
<div class="container">
<div class="text">1asdasdasdas
adasdasdasdasdasdasdasdasdasdqweqweqwewqe
qweqweqweqweqweqweqwdasdasdasdasd</div>
<div class="tet">2dasdas</div>
<div class="text">3dasda</div>
<div class="text">4adsdqw</div>
<div class="text">5qweqwe</div>
<div class="text">6啊发顺丰</div>
<div class="text">7qasd安达市⼤所⼤e</div>
<div class="text">8阿斯顿撒⼤所⼤所we</div>
<div class="ntc">
<div class="child">CSS是Cascading Style Sheets（层叠样式表）的缩写
CSS描述了如何在屏幕，纸张或其他媒体上显⽰HTML元素
CSS节省了⼤量的⼯作。它可以同时控制多个⽹页的布局外部样式表存储在CSS⽂件中为什么要使⽤CSS？</div>        <div class="child">sss</div>
<div class="child">ddd</div>
</div>
</div>
再为嵌套容器的⽗容器ntc 及其⼦容器添加布局和样式
.ntc{
display: grid;
grid-template-columns: repeat(2,1fr);
grid-auto-rows: minmax(30px,auto);
border: red 1px solid;
background-color: sandybrown;
grid-row-gap: 1rem;
grid-column-gap: 2rem;
}
.ntc > div{
border: blue 1px solid;
}
产⽣效果
三、设置对齐⽅式
justify-items 设置⾏对齐⽅式，分别可以为⾏轴线左、右、居中、充满（默认）对齐align-items 同理，设置轴对齐⽅式，分别可以为⾏轴线上、下、居中、充满（默认）可以设置的属性有：start、end、center、stretch
下⾯以设置单个⼦元素为例⼦注意：设置单个⼦元素是justify-self 和 align-self
.container > :nth-child(3){
justify-self: start;
}
产⽣效果
.container > :nth-child(3){
justify-self: start;
align-self: end;
}
四、跨⾏
在单个属性上设置 grid-column、guid-row
.container > :nth-child(6){
grid-row: 1/3;
grid-column: 1/3;
}
.container > :nth-child(2){
grid-row: 1/4;
grid-column: 1/4;
}
设置块2 从第1根线到第4根线，主要这两个都从1开始跨⾏，会产⽣重叠，z-index可以起作⽤优先安排跨⾏的模块，其它的顺势排列
text align center
最后：练习⼀下

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