CSS--使用CSS Grid（網格）布局

CarlBenjamin 發布于2019-08-02 11:08 / 2921人閱讀

摘要：一網格布局簡介布局由兩個核心組成部分是父元素和子元素，父元素是實際的網格，子元素是網格內的內容。添加這個屬性被稱為網格區域，也叫模板區域，能夠讓我們輕松地進行布局實驗。

、一 CSS Grid(網格布局)簡介

CSS Grid 布局由兩個核心組成部分是父元素和子元素，父元素是實際的 grid(網格)，子元素是 grid(網格) 內的內容。
下面是一個父元素和六個子元素

要把父元素元素變成一個 grid(網格)，只要簡單地把其 display 屬性設置為 grid
效果圖：

下面進行網格布局：（具體解釋在代碼中）

        .box {
            width: 350px;
            height: 350px;
            /* background: #ccc; */
            margin: 0 auto;
            grid-gap: 5px;
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
        }

        .item {
            border: 1px solid black;
            box-sizing: border-box;
        }

        .div1 {
            grid-column-start: 1;
            grid-column-end: 3;
            /*(div1從占據從第一條網格線開始，到第三條網格線結束)*/
            line-height: 100px;
            text-align: center;
            background: rgb(252, 0, 0);
            /* grid-column: 1/3;(這是縮寫的形式) */
        }

        .div2 {
            line-height: 100px;
            text-align: center;
            background: rgb(252, 134, 0);
        }

        .div3 {
            grid-row-start: 2;
            grid-row-end: 4;
            /* grid-row: 2/4;(這是縮寫的形式) */
            line-height: 200px;
            text-align: center;
            background: rgb(21, 207, 108);
        }

        .div4 {
            grid-column-start: 2;
            grid-column-end: 4;
            line-height: 100px;
            text-align: center;
            background: rgb(18, 21, 189);
            /* grid-column: 2/4;(這是縮寫的形式) */
        }

        .div5 {
            line-height: 100px;
            text-align: center;
            background: rgb(16, 170, 197);
        }

        .div6 {
            line-height: 100px;
            text-align: center;
            background: rgb(172, 126, 199);
        }

上面代碼中的網格線(如圖箭頭所指的地方就是一根網格線)：

二、響應式網格布局

和上面的差不多（添加了以下的內容）
使用grid-template-columns 屬性創建一個 12 列的網格，每個列都是一個單位寬度（總寬度的 1/12 ）
使用 grid-template-rows 屬性創建 3 行

使用 grid-gap 屬性在網格中的網格項之間添加一個間隙。

代碼如下：

    
        頂部（一個點表示一個空白的格子），所以距離左邊和右邊各有一個格子的距離。
        中間1
        中間2所以可以利用空白的格子來對你所要拍的網頁來進行布局
        底部（一個點表示一個空白的格子），所以距離右邊有三個格子的距離。

添加 grid-template-areas
這個屬性被稱為網格區域，也叫模板區域，能夠讓我們輕松地進行布局實驗。
效果圖：
][3]
代碼如下：（具體描述在代碼中）

        .container {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: 50px 350px 50px;
            grid-gap: 5px;
            grid-template-areas: ". h h h h h h h h h h ." " m m c c c c c c c c c c" "f f f f f f f f f . . .";
        }

        .container>div {
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        .header {
            text-align: center;
            line-height:50px;
            grid-area: h;
            color:rgb(219, 52, 169);
        }

        .menu {
            grid-area: m;
            text-align: center;
            line-height:350px;
        }

        .content {
            text-align: center;
            line-height:350px;
            grid-area: c;
            color:rgb(25, 158, 69);
        }

        .footer {
            color:rgb(212, 112, 18);
            text-align: center;
            line-height:50px;
            grid-area: f;
        }

GPU云服務器云服務器 css布局 css布局教程學習css布局 css使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/52791.html

翻譯 | CSS網格（CSS Grid）布局入門

摘要：瀏覽器兼容性網格布局從開始收到支持，微軟在會更新對網格布局的支持。微軟的瀏覽器和有一種比較舊的實現，所以有不少限制，我們會簡單介紹新的實現方式和老的實現方式之間的區別，這樣你能知道如何規避他們。原文地址：Getting to know CSS Grid Layout 原文作者：Chris Wright 譯者：華翔校對者：珂珂、干干翻譯 | CSS網格（CSS Grid）布局入...

Ashin 2019-08-29 13:18 評論0 收藏0
CSS Grid 布局完全指南(圖解 Grid 詳細教程)

摘要：重復網格區域的名稱導致內容跨越這些單元格。中間一排將由兩個區域，一個是空單元格，一個區域組成。你可以使用任意數量的相鄰的點來聲明單個空單元格。只要這些點之間沒有空隙隔開，他們就代表一個單獨的單元格。? CSS Grid 布局是 CSS 中最強大的布局系統。與 flexbox 的一維布局系統不同，CSS Grid 布局是一個二維布局系統，也就意味著它可以同時處理列和行。通過將 CSS 規則應用...

flybywind 2019-04-23 11:50 評論0 收藏0
CSS Grid布局：什么是網格布局

摘要：網格單元格網格單元格是指四條網格線之間的空間。所以它是最小的單位，就像表格中的單元格。圖中突出顯示的網格區域是行線和列線之間的區域，其主要包括了四個網格單元格。 CSS Grid現在已經被W3C納入到CSS3的一個布局模塊當中，被稱為CSS Grid Layout Module。而我們較為熟悉的還是將其想像成網格或者柵格，也就是早期的960gs。不管是網格還是柵格或者現在的CSS Gr...

xiaoqibTn 2019-08-28 18:03 評論0 收藏0
(譯)原生CSS網格布局學習筆記

摘要：你可以用網格這樣做這樣的顯示效果是沒什么錯誤的，當使用網格，重新定義列數非常簡單。絕對定位當我們絕對定位一個網格元素的時候，這個元素會跑到它的容器中，我們可以用和來定位它。最簡單的命名約定使用網格自動編號。注：此文是我翻譯的第一篇技術文章。適合有一定CSS原生網格布局使用經驗的開發者（讀前需要先去了解一下原生CSS網格的語法），原生CSS網格布局（Native CSS grid）截止...

v1 2019-08-02 15:56 評論0 收藏0
(譯)原生CSS網格布局學習筆記

摘要：你可以用網格這樣做這樣的顯示效果是沒什么錯誤的，當使用網格，重新定義列數非常簡單。絕對定位當我們絕對定位一個網格元素的時候，這個元素會跑到它的容器中，我們可以用和來定位它。最簡單的命名約定使用網格自動編號。注：此文是我翻譯的第一篇技術文章。適合有一定CSS原生網格布局使用經驗的開發者（讀前需要先去了解一下原生CSS網格的語法），原生CSS網格布局（Native CSS grid）截止...

Warren 2019-08-30 13:10 評論0 收藏0
CSS Grid布局：網格單元格布局

摘要：基于網格線的占位區網格中的單元格是有網格線劃分出來的，那么在網格布局中，同樣可以使用網格線來給子元素設置占位區域。也就是說這四條網格線間的區域是一個單元格。 CSS Grid布局對于我等來說就是一個全新的布局，但國外很多同行朋友已對這種布局做了全面的探知。前面花了兩篇內容（《CSS Grid布局：什么是網格布局》和《[CSS Grid布局：瀏覽器開啟CSS Grid Layout]ht...

maxmin 2019-08-28 18:03 評論0 收藏0