CSS Grid Layout(網格佈局) 詳情 - 佈局,css 來了老弟動態日志

CSS 有一些屬性經常被用來解決佈局問題：如（浮動float、定位postion）這些比較 hack 的方法經常會給頁面遺留下一些問題。

彈性盒子Flexbox是一個非常好的佈局工具，網格佈局 CSS Grid Layout 是最新、更強大的佈局方式。本文就來簡單介紹一下什麼是網格佈局。

網格佈局(CSS Grid Layout)

網格佈局是二維的佈局系統，和過去常用的佈局方式相比完全改變了我們設計UI的方式。

需要了解的術語

Grid Container(網格容器)，Grid Item(網格容器子元素)。

Grid Line(網格線)，Grid Cell(網格單元格)。

Grid Track(網格軌道)，Grid Area(被網格線分開的區域)。

圖例參考

頁面結構

<div class="container">
    <div class="item item_a">item_a</div>
    <div class="item item_b">item_b</div>
    <div class="item item_c">item_c</div>
</div>

定義一個網格佈局的容器

.container {
    display: grid;
}

設置網格行、列

.container {
    display: grid;
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 100px [row1-end] 100px [third-line] 100px [last-line];
}

通過上面的方式就聲明瞭一個 3行5列的網格容器。

設置網格容器內元素位置

.item_a {
    grid-column-start: 4;
    grid-column-end: five;
    grid-row-start: row1-start;
    grid-row-end: 2;

    background-color: orange;
}
.item_b {
    grid-column-start: 1;
    grid-column-end: span col4-start;
    grid-row-start: 3;
    grid-row-end: span 2;

    background-color: aqua;
}
.item_c {
    grid-column-start: 2;
    grid-column-end: span 1;
    grid-row-start: 2;
    grid-row-end: span 1;

    background-color: rgb(149, 255, 0);
}

結果圖：