如何實現Grid 宮格布局

這期內容當中小編將會給大家帶來有關如何實現Grid 宮格布局，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

兩邊無縫隙，每列之間有縫隙

width: 100%;  
display: grid;  
grid-template-columns: repeat(4,1fr);  
justify-items: stretch;  
grid-gap: 1px;

屬性介紹：justify-items屬性設置單元格內容的水平位置（左中右），align-items屬性設置單元格內容的垂直位置（上中下）。

• start：對齊單元格的起始邊緣。

• end：對齊單元格的結束邊緣。

• center：單元格內部居中。

• stretch：拉伸，占滿單元格的整個寬度（默認值）。

屬性介紹：容器指定了網格布局以后，接著就要劃分行和列。grid-template-columns屬性定義每一列的列寬，grid-template-rows屬性定義每一行的行高。repeat(4,1fr)表示重復，第一個參數表示次數，這里一共4列，那就是4次，1rf表示份的概念，repeat(4,1fr)代表平均分為4份

效果如下：

行與列間隙相同，填充排列方向優先填滿垂直方向

.swiper-slide-inner {  
    width: 100%;  
    display: grid;  
    /*優先垂直方向排列*/  
    grid-auto-flow: column;  
    /*分為三列，平均分*/  
    /*grid-template-columns: repeat(3, 1fr);*/  
    grid-template-columns: 1fr 1fr 1fr;  
    /*分為2行，平均分配*/  
    /*grid-template-rows: repeat(2, 1fr);*/  
    grid-template-rows: 1fr 1fr;  
    grid-row-gap: 10px;  
    grid-column-gap: 10px;  
    .card-item {  
        display: flex;  
        flex-wrap: wrap;  
        width: 230px;  
        height: 230px;
    }
}

屬性介紹：劃分網格以后，容器的子元素會按照順序，自動放置在每一個網格。默認的放置順序是"先行后列"，即先填滿第一行，再開始放入第二行，即下圖數字的順序。這個順序由grid-auto-flow屬性決定，默認值是row，即"先行后列"。也可以將它設成column，變成"先列后行"。

上述就是小編為大家分享的如何實現Grid 宮格布局了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。