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)吧。

可以給父容器的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

發(fā)表評(píng)論 共有條評(píng)論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表