CSS Grid布局對于我等來說就是一個全新的布局，但國外很多同行朋友已對這種布局做了全面的探知。前面花了兩篇內容（《CSS Grid布局教程之什么是網格布局》和《CSS Grid布局教程之瀏覽器開啟CSS Grid Layout匯總》）為這篇文章做足了鋪墊?；蛟S你想知道的是如何使用？各位看官不用太急，接下來通過各種實例向大家闡述CSS Grid布局，讓我們一起領略其強大的魅力。

當然，接下來的示例不是我想出來的，這是我挖出來的，主要制作者是Rachel Andrew。在繼續往下閱讀之前，我們應該一起感謝Rachel Andrew，感謝他給我們提供這么多有關于CSS Grid Layout的示例。同時如果你想在你的瀏覽器中能正常的演示接下的有關于CSS Grid Layout的示例，你得先保證你已閱讀了《CSS Grid布局教程之瀏覽器開啟CSS Grid Layout匯總》一文，并且按照文章中的方法進行過設置。如果沒有話，或許你將看不到下面示例的效果。咱也不糾結了，開始實戰吧。

可以給父容器的display屬性設置為grid或者inline-grid來定義一個網格。這樣你就可以使用grid-template-columns和grid-template-rows屬性來創建一個網格。

在這個示例中，創建了一個三列網格，其中三個列的列寬是100px，并且指定列與列之間的間距為10px。同時網格具有三行，每行的高度是自動的，另外行與行之間的間距是10px。簡單點說就是一個三行三列的網格，并且列與列之間，行與行之間的間距都是10px。

此時瀏覽器將容器中的子元素自動填入到每個網格單元格中，當超過指定的列數時，網格會自動換行，如下圖所示：

看看代碼是怎么完成的：

HTML

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表