前端常见的布局方式 —— 网格布局

一、网格布局

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可以起作用

优先安排跨行的模块，其它的顺势排列

最后：练习一下

秒客网

前端常见的布局方式 —— 网格布局

相关文章