Grid布局

發(fā)布時(shí)間：2020-08-03 04:19:16 來源：網(wǎng)絡(luò) 閱讀：434 作者：Positive咳咳欄目：web開發(fā)

Gird布局是什么？

Grid(網(wǎng)格) 布局使我們能夠比以往任何時(shí)候都可以更靈活構(gòu)建和控制自定義網(wǎng)格 ; 能夠?qū)⒕W(wǎng)頁分成具有簡單屬性的行和列來完成我們需要的網(wǎng)格布局。

Grid布局

CSS Grid 布局由兩個(gè)核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實(shí)際的 grid(網(wǎng)格)，items 是 grid(網(wǎng)格) 內(nèi)的內(nèi)容。

下面是一個(gè) 父元素，內(nèi)部包含6個(gè) 子元素：

<div class="box">
       <div >1</div>
       <div >2</div>
       <div >3</div>
       <div >4</div>
       <div >5</div>
       <div >6</div>
</div>

Grid布局

為了使其成為二維的網(wǎng)格容器，我們需要定義列和行：
創(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)建幾列就在后面寫幾個(gè)值；
grid-template-rows 創(chuàng)建行；創(chuàng)建幾行就在后面寫幾個(gè)值；

效果圖為：

Grid布局

為了確保能正確理解這些值與網(wǎng)格外觀之間的關(guān)系，請看一下這個(gè)例子。

CSS代碼

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

效果為：

Grid布局

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

覺得對(duì)您有幫助，麻煩您點(diǎn)個(gè)關(guān)注，如有不足，請多指教！

向AI問一下細(xì)節(jié)

Grid布局

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽