CSS3-grid-格线布局

前言

最近開始了寫博客的計畫，一方面受同學影響，一方面也是覺得該為自己的學習留下一點足跡。廢話不多說，第一篇就來談談css3的grid屬性，還請大佬們多多指教。

正文

grid 的基本屬性

• grid 屬性

attribute	description
grid-template-columns	網格區塊寬度
grid-template-rows	網格區塊高度
grid-template-areas	網格區塊名稱
grid-column-gap	網格區塊左右間距
grid-row-gap	網格區塊上下間距
grid-column	指定網格左右的位置
grid-row	指定網格上下的位置

grid的布局方式

首先還是先搞清楚grid的布局方式，顧名思義，grid代表的是格線。在grid的布局方式下，我們可以把分成兩部分來看，一個是屬於外部容器(grid-container)的屬性，另一個是屬於內部容器(grid-item)的屬性。接下來就來看看有哪些屬性以及用法八!

外部容器

display

首先必須定義容器所採用的顯示系統。

.grid-box {
   
    display: grid;
}

grid-template-columns, grid-template-rows

grid和flex最大的不同在於，grid透過grid-template來定義排版方式，分別由column跟row定義出直排與橫列的格線，內容再依照格線做安排。

.grid-box