grid佈局快速入門

Grid佈局快速入門

經常使用Grid佈局屬性介紹

下面從一個簡單Grid佈局例子提及。
CSS Grid 佈局由兩個核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實際的 grid(網格)，items 是 grid(網格) 內的內容。

下面是一個 wrapper 元素，內部包含6個 items ：

<div class="wrapper">
            <div class="item div1">1</div>
            <div class="item div2">2</div>
            <div class="item div3">3</div>
            <div class="item div4">4</div>
            <div class="item div5">5</div>
            <div class="item div6">6</div>
        </div>

要把 wrapper 元素變成一個 grid(網格)，只要簡單地把其 display 屬性設置爲 grid 便可

.wrapper {
    display: grid;
}

Columns(列) 和 rows(行)

爲了使其成爲二維的網格容器，咱們須要定義列和行。讓咱們建立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個值表示三列，相應的數值表示列寬即都爲100px。
grid-template-rows的2個值表示兩行，相應的數值表示行高即都爲50px

獲得的結果以下：

咱們能夠變化一下行高跟列寬的值看下效果，代碼：

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

效果圖：

持續更新，歡迎你們指導！