資訊專欄INFORMATION COLUMN
摘要：一概述網(wǎng)格布局是一套二維的頁面布局系統(tǒng)，它的出現(xiàn)將完全顛覆頁面布局的傳統(tǒng)方式。接下來，我們從網(wǎng)格容器到網(wǎng)格項的各個基本屬性來介紹網(wǎng)格布局。例網(wǎng)格項目按行排列，網(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 值設(shè)為 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：
屬性grid-template-rows用于定義行的尺寸，即軌道尺寸。軌道尺寸可以是任何非負的長度值（px，%，em，等）
網(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屬性值的設(shè)置，使該網(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屬性用來設(shè)置，瀏覽器自動創(chuàng)建的多余網(wǎng)格的列寬和行高。它們的寫法與grid-template-columns和grid-template-rows完全相同。如果不指定這兩個屬性，瀏覽器完全根據(jù)單元格內(nèi)容的大小，決定新增網(wǎng)格的列寬和行高。
希望我的文章能夠?qū)δ兴鶐椭?/strong>
歡迎大家滴滴我：rgz987
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114718.html
摘要：一概述網(wǎng)格布局是一套二維的頁面布局系統(tǒng)，它的出現(xiàn)將完全顛覆頁面布局的傳統(tǒng)方式。接下來，我們從網(wǎng)格容器到網(wǎng)格項的各個基本屬性來介紹網(wǎng)格布局。例網(wǎng)格項目按行排列，網(wǎng)格項目寬度由自身寬度決定。這時，瀏覽器會自動生成多余的網(wǎng)格，以便放置項目。 一、概述 CSS網(wǎng)格布局（Grid）是一套二維的頁面布局系統(tǒng)，它的出現(xiàn)將完全顛覆頁面布局的傳統(tǒng)方式。 首先來介紹幾個概念: 想象一個三行三列的布局，網(wǎng)格...
摘要：簡言網(wǎng)格布局是一套二維的頁面布局系統(tǒng)，它的出現(xiàn)將完全顛覆頁面布局的傳統(tǒng)方式。例用屬性和定義網(wǎng)格，同時定義網(wǎng)格線名稱。例一組區(qū)域名稱要放在單引號或雙引號內(nèi)，每一個名稱之間以空格分隔。例本例中，是通過隱式網(wǎng) 簡言 CSS網(wǎng)格布局（Grid）是一套二維的頁面布局系統(tǒng)，它的出現(xiàn)將完全顛覆頁面布局的傳統(tǒng)方式。傳統(tǒng)的CSS頁面布局 一直不夠理想。包括table布局、浮動、定位及內(nèi)聯(lián)塊等方式，從本質(zhì)...
摘要：重復(fù)網(wǎng)格區(qū)域的名稱導(dǎo)致內(nèi)容跨越這些單元格。中間一排將由兩個區(qū)域，一個是空單元格，一個區(qū)域組成。你可以使用任意數(shù)量的相鄰的點來聲明單個空單元格。只要這些點之間沒有空隙隔開，他們就代表一個單獨的單元格。? CSS Grid 布局是 CSS 中最強大的布局系統(tǒng)。與 flexbox 的一維布局系統(tǒng)不同，CSS Grid 布局是一個二維布局系統(tǒng)，也就意味著它可以同時處理列和行。通過將 CSS 規(guī)則應(yīng)用...
摘要：的個值表示三列，相應(yīng)的數(shù)值表示列寬即都為。嘗試其它布局把移到右邊實現(xiàn)后的效果使用點來創(chuàng)建空白的網(wǎng)格單元格實現(xiàn)效果真正的響應(yīng)式布局假設(shè)你想在移動設(shè)備上查看的是標題旁邊是菜單。 常用Grid布局屬性介紹 下面從一個簡單Grid布局例子說起。 CSS Grid 布局由兩個核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實際的 grid(網(wǎng)格)，items...
摘要：最精彩的地方在于所有的響應(yīng)特性被添加到了一行代碼中?；A(chǔ)響應(yīng)單位柵格布局帶來了一個全新的值單位，單位通常簡寫為，它允許你根據(jù)需要將容器拆分為多個塊。 原文地址: https://medium.com/free-code-...原文作者: Per Harald Borgen 翻譯作者: hanxiansen showImg(https://segmentfault.com/img/re...
閱讀 669·2021-10-09 09:41
閱讀 654·2019-08-30 15:53
閱讀 1082·2019-08-30 15:53
閱讀 1217·2019-08-30 11:01
閱讀 1575·2019-08-29 17:31
閱讀 994·2019-08-29 14:05
閱讀 1722·2019-08-29 12:49
閱讀 417·2019-08-28 18:17
