1. 程式人生 > >初識grid布局

初識grid布局

能力 工具 str tro pla ron 自己 核心 創建

Grid 布局是網站設計的基礎,CSS Grid 是創建網格布局最強大和最簡單的工具。

CSS Grid 布局由兩個核心組成部分是 wrapper(父元素)和 items(子元素)。 wrapper 是實際的 grid(網格),items 是 grid(網格) 內的內容。要把 wrapper 元素變成一個 grid(網格),只要簡單地把其 display 屬性設置為 grid 即可。為了使其成為二維的網格容器,我們需要定義列和行,並且自己設定高度和寬度。然後學習的是如何在 grid(網格) 上放置 items(子元素) 。這裏才是體現 Grid 布局能力的地方,因為它使得創建布局變得非常簡單。

初識grid布局