Gird布局是什么？

成都創(chuàng)新互聯(lián)是一家專業(yè)提供崆峒企業(yè)網站建設,專注與成都做網站、網站建設、HTML5、小程序制作等業(yè)務。10年已為崆峒眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網站設計公司優(yōu)惠進行中。

Grid(網格) 布局使我們能夠比以往任何時候都可以更靈活構建和控制自定義網格 ; 能夠將網頁分成具有簡單屬性的行和列來完成我們需要的網格布局。

CSS Grid 布局由兩個核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實際的 grid(網格)，items 是 grid(網格) 內的內容。

下面是一個 父元素，內部包含6個 子元素 ：

       
1
       
2
       
3
       
4
       
5
       
6

為了使其成為二維的網格容器，我們需要定義列和行：
創(chuàng)建3行(columns)2列(rows)

 .box{           
            display: grid;
            grid-template-columns: 50px 50px 50px;
            grid-template-rows: 50px 50px;
        }

grid-template-columns 創(chuàng)建列；創(chuàng)建幾列就在后面寫幾個值；
grid-template-rows 創(chuàng)建行；創(chuàng)建幾行就在后面寫幾個值；

效果圖為：

為了確保能正確理解這些值與網格外觀之間的關系，請看一下這個例子。

CSS代碼

.box{
          display: grid;
          grid-template-columns: 300px 150px 50px;
          grid-template-rows: 150px 50px;
        }

效果為：

是不是非常好理解，使用起來也非常簡單是不是？

覺得對您有幫助，麻煩您點個關注，如有不足，請多指教！