一、概述

在阿克塞哈薩克族自治等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供網(wǎng)站建設、成都網(wǎng)站建設 網(wǎng)站設計制作按需制作,公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,成都品牌網(wǎng)站建設,成都營銷網(wǎng)站建設,成都外貿(mào)網(wǎng)站建設,阿克塞哈薩克族自治網(wǎng)站建設費用合理。

CSS網(wǎng)格布局（Grid）是一套二維的頁面布局系統(tǒng)，它的出現(xiàn)將完全顛覆頁面布局的傳統(tǒng)方式。

首先來介紹幾個概念:

想象一個三行三列的布局，網(wǎng)格線就是構(gòu)成網(wǎng)格所有的線條，三行三列的布局每行就會有4條網(wǎng)格線。
網(wǎng)格軌道就是相鄰兩條平行的網(wǎng)格線之間的部分。

和flex布局一樣，他會有父容器和子項目，在這兒我們稱為網(wǎng)格容器和網(wǎng)格項。
接下來，我們從網(wǎng)格容器到網(wǎng)格項的各個基本屬性來介紹網(wǎng)格布局。

二、 網(wǎng)格容器

將屬性 display 值設為 grid 或 inline-grid 就創(chuàng)建了一個網(wǎng)格容器，所有容器直接子結(jié)點自動成為網(wǎng)格項目。

例1：

網(wǎng)格項目按行排列，網(wǎng)格項目占用整個容器的寬度。

例2：

網(wǎng)格項目按行排列，網(wǎng)格項目寬度由自身寬度決定。

三、顯示網(wǎng)格

屬性grid-template-rows和grid-template-columns

容器指定了網(wǎng)格布局以后，接著就要劃分行和列。grid-template-columns屬性定義每一列的列寬，grid-template-rows屬性定義每一行的行高。

例3：

網(wǎng)格項目1的行高是50px，網(wǎng)格項目2的行高是100px。

因為只定義了兩個行高，網(wǎng)格項目3和4的行高取決于其本身的高度。

例4：

類似于行的定義，屬性grid-template-columns用于定義列的尺寸。

因為定義中只有三列，所以項目4，5，6排在新的一行; 并因為它們位于第1，2，3列的軌道上，所以其寬度等于定義中第1，2，3列軌道的寬度。

網(wǎng)格項目的第1列，第2列，第3列的寬度分別是 90px, 50px 和 120px 。

四、網(wǎng)格項目跨越行列

網(wǎng)格項目默認都占用一行和一列，但可以使用前一節(jié)中定位項目的屬性來指定項目跨越多行或多列。

例5：

通過grid-column-start和grid-column-end屬性值的設置，使該網(wǎng)格項目跨越多列。

五、justify-content 屬性，align-content 屬性

justify-content屬性是整個內(nèi)容區(qū)域在容器里面的水平位置（左中右），align-content屬性是整個內(nèi)容區(qū)域的垂直位置（上中下）。

這兩個屬性的寫法完全相同，都可以取下面這些值。（下面的圖都以justify-content屬性為例，align-content屬性的圖完全一樣，只是將水平方向改成垂直方向。）

start - 對齊容器的起始邊框。

end - 對齊容器的結(jié)束邊框。

center - 容器內(nèi)部居中。

stretch - 項目大小沒有指定時，拉伸占據(jù)整個網(wǎng)格容器。

space-around - 每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與容器邊框的間隔大一倍。

space-between - 項目與項目的間隔相等，項目與容器邊框之間沒有間隔。

space-evenly - 項目與項目的間隔相等，項目與容器邊框之間也是同樣長度的間隔。

六、grid-auto-columns 屬性，grid-auto-rows 屬性

有時候，一些項目的指定位置，在現(xiàn)有網(wǎng)格的外部。比如網(wǎng)格只有3列，但是某一個項目指定在第5行。這時，瀏覽器會自動生成多余的網(wǎng)格，以便放置項目。

grid-auto-columns屬性和grid-auto-rows屬性用來設置，瀏覽器自動創(chuàng)建的多余網(wǎng)格的列寬和行高。它們的寫法與grid-template-columns和grid-template-rows完全相同。如果不指定這兩個屬性，瀏覽器完全根據(jù)單元格內(nèi)容的大小，決定新增網(wǎng)格的列寬和行高。

希望我的文章能夠?qū)δ兴鶐椭?/p>

文章名稱：CSS網(wǎng)格布局（Grid）教程
網(wǎng)站URL：http://www.rwnh.cn/article2/gcgsic.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、品牌網(wǎng)站設計、、品牌網(wǎng)站制作、自適應網(wǎng)站、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)