CSS Grid布局對(duì)于我等來(lái)說(shuō)就是一個(gè)全新的布局,但國(guó)外很多同行朋友已對(duì)這種布局做了全面的探知。前面花了兩篇內(nèi)容(《CSS Grid布局教程之什么是網(wǎng)格布局》和《CSS Grid布局教程之瀏覽器開啟CSS Grid Layout匯總》)為這篇文章做足了鋪墊。或許你想知道的是如何使用?各位看官不用太急,接下來(lái)通過(guò)各種實(shí)例向大家闡述CSS Grid布局,讓我們一起領(lǐng)略其強(qiáng)大的魅力。
當(dāng)然,接下來(lái)的示例不是我想出來(lái)的,這是我挖出來(lái)的,主要制作者是Rachel Andrew。在繼續(xù)往下閱讀之前,我們應(yīng)該一起感謝Rachel Andrew,感謝他給我們提供這么多有關(guān)于CSS Grid Layout的示例。同時(shí)如果你想在你的瀏覽器中能正常的演示接下的有關(guān)于CSS Grid Layout的示例,你得先保證你已閱讀了《CSS Grid布局教程之瀏覽器開啟CSS Grid Layout匯總》一文,并且按照文章中的方法進(jìn)行過(guò)設(shè)置。如果沒(méi)有話,或許你將看不到下面示例的效果。咱也不糾結(jié)了,開始實(shí)戰(zhàn)吧。
定義一個(gè)網(wǎng)格可以給父容器的display
屬性設(shè)置為grid
或者inline-grid
來(lái)定義一個(gè)網(wǎng)格。這樣你就可以使用grid-template-columns
和grid-template-rows
屬性來(lái)創(chuàng)建一個(gè)網(wǎng)格。
在這個(gè)示例中,創(chuàng)建了一個(gè)三列網(wǎng)格,其中三個(gè)列的列寬是100px
,并且指定列與列之間的間距為10px
。同時(shí)網(wǎng)格具有三行,每行的高度是自動(dòng)的,另外行與行之間的間距是10px
。簡(jiǎn)單點(diǎn)說(shuō)就是一個(gè)三行三列的網(wǎng)格,并且列與列之間,行與行之間的間距都是10px
。
此時(shí)瀏覽器將容器中的子元素自動(dòng)填入到每個(gè)網(wǎng)格單元格中,當(dāng)超過(guò)指定的列數(shù)時(shí),網(wǎng)格會(huì)自動(dòng)換行,如下圖所示:
看看代碼是怎么完成的:
HTML
新聞熱點(diǎn)
疑難解答
圖片精選