Grid 宮格常用布局的實現

  發布時間:2020-01-10 16:48:30   作者:MangoGoing   我要評論
這篇文章主要介紹了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,變成"先列后行"。

效果如下:

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • 解析CSS中的Grid布局完全指南

    這篇文章主要介紹了解析CSS中的Grid布局完全指南的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來
    2019-04-09
  • 10分鐘理解CSS3 Grid布局

    Grid做前端的同學應該都很熟悉了,這篇文章主要介紹了10分鐘理解CSS3 Grid布局,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-20
  • css中grid屬性的使用詳解

    這篇文章主要介紹了css中grid屬性的使用詳解的相關資料,詳細的介紹了grid屬性,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-26
  • CSS Grid 網格布局全解析

    這篇文章主要介紹了CSS Grid 網格布局全解析的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-29
  • CSS Grid布局教程之網格單元格布局

    本文通過各種實例向大家闡述CSS Grid布局,讓我們一起領略其強大的魅力,需要的朋友可以參考下
    2014-12-30
  • CSS Grid布局教程之瀏覽器開啟CSS Grid Layout匯總

    在這篇文章中,主要向大家介紹如何讓自己的瀏覽器支持CSS Grid Layout模塊功能,需要的朋友可以參考下
    2014-12-30
  • CSS Grid布局教程之什么是網格布局

    在這篇文章中簡單的介紹了CSS Grid Layout,以及為什么要使用他,并且介紹了其一些術語:網格線、網格軌道、網格單元格、網格區域和網格容器等,為后面如何學習和使用CSS G
    2014-12-30
  • 使用CSS Grid布局實現網格的流動

    這篇文章主要介紹了使用CSS Grid布局實現網格的流動,需要的朋友可以參考下
    2014-12-30

最新評論

pc蛋蛋幸运28app下载地址