前端常見的布局方式 —— 網格布局

一、網格布局

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

優先安排跨行的模塊，其它的順勢排列

 

 最后：練習一下