摘要：布局快速入門常用布局屬性介紹下面從一個(gè)簡單布局例子說起。布局由兩個(gè)核心組成部分是父元素和子元素。是實(shí)際的網(wǎng)格，是網(wǎng)格內(nèi)的內(nèi)容。讓我們創(chuàng)建列和行。的個(gè)值表示三列，相應(yīng)的數(shù)值表示列寬即都為。

下面從一個(gè)簡單Grid布局例子說起。
CSS Grid 布局由兩個(gè)核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實(shí)際的 grid(網(wǎng)格)，items 是 grid(網(wǎng)格) 內(nèi)的內(nèi)容。

下面是一個(gè) wrapper 元素，內(nèi)部包含6個(gè) items ：

            
1
            
2
            
3
            
4
            
5
            
6
        

要把 wrapper 元素變成一個(gè) grid(網(wǎng)格)，只要簡單地把其 display 屬性設(shè)置為 grid 即可

.wrapper {
    display: grid;
}

為了使其成為二維的網(wǎng)格容器，我們需要定義列和行。讓我們創(chuàng)建3列和2行。我們將使用grid-template-row和grid-template-column屬性。

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

grid-template-columns的3個(gè)值表示三列，相應(yīng)的數(shù)值表示列寬即都為100px。
grid-template-rows的2個(gè)值表示兩行，相應(yīng)的數(shù)值表示行高即都為50px

得到的結(jié)果如下：

我們可以變化一下行高跟列寬的值看下效果，代碼：

.wrapper {
    display: grid;
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 100px 50px;
}

效果圖：