資訊專(zhuān)欄INFORMATION COLUMN
摘要：一概述網(wǎng)格布局是一套二維的頁(yè)面布局系統(tǒng)，它的出現(xiàn)將完全顛覆頁(yè)面布局的傳統(tǒng)方式。接下來(lái)，我們從網(wǎng)格容器到網(wǎng)格項(xiàng)的各個(gè)基本屬性來(lái)介紹網(wǎng)格布局。例網(wǎng)格項(xiàng)目按行排列，網(wǎng)格項(xiàng)目寬度由自身寬度決定。這時(shí)，瀏覽器會(huì)自動(dòng)生成多余的網(wǎng)格，以便放置項(xiàng)目。
一、概述
CSS網(wǎng)格布局（Grid）是一套二維的頁(yè)面布局系統(tǒng)，它的出現(xiàn)將完全顛覆頁(yè)面布局的傳統(tǒng)方式。
首先來(lái)介紹幾個(gè)概念:
想象一個(gè)三行三列的布局，網(wǎng)格線就是構(gòu)成網(wǎng)格所有的線條，三行三列的布局每行就會(huì)有4條網(wǎng)格線。
網(wǎng)格軌道就是相鄰兩條平行的網(wǎng)格線之間的部分。
和flex布局一樣，他會(huì)有父容器和子項(xiàng)目，在這兒我們稱為網(wǎng)格容器和網(wǎng)格項(xiàng)。
接下來(lái)，我們從網(wǎng)格容器到網(wǎng)格項(xiàng)的各個(gè)基本屬性來(lái)介紹網(wǎng)格布局。
二、 網(wǎng)格容器
將屬性 display 值設(shè)為 grid 或 inline-grid 就創(chuàng)建了一個(gè)網(wǎng)格容器，所有容器直接子結(jié)點(diǎn)自動(dòng)成為網(wǎng)格項(xiàng)目。
例1：
網(wǎng)格項(xiàng)目按行排列，網(wǎng)格項(xiàng)目占用整個(gè)容器的寬度。
例2：
網(wǎng)格項(xiàng)目按行排列，網(wǎng)格項(xiàng)目寬度由自身寬度決定。
三、顯示網(wǎng)格
屬性grid-template-rows和grid-template-columns
容器指定了網(wǎng)格布局以后，接著就要?jiǎng)澐中泻土小rid-template-columns屬性定義每一列的列寬，grid-template-rows屬性定義每一行的行高。
例3：
屬性grid-template-rows用于定義行的尺寸，即軌道尺寸。軌道尺寸可以是任何非負(fù)的長(zhǎng)度值（px，%，em，等）
網(wǎng)格項(xiàng)目1的行高是50px，網(wǎng)格項(xiàng)目2的行高是100px。
因?yàn)橹欢x了兩個(gè)行高，網(wǎng)格項(xiàng)目3和4的行高取決于其本身的高度。
例4：
類(lèi)似于行的定義，屬性grid-template-columns用于定義列的尺寸。
因?yàn)槎x中只有三列，所以項(xiàng)目4，5，6排在新的一行; 并因?yàn)樗鼈兾挥诘?，2，3列的軌道上，所以其寬度等于定義中第1，2，3列軌道的寬度。
網(wǎng)格項(xiàng)目的第1列，第2列，第3列的寬度分別是 90px, 50px 和 120px 。
四、網(wǎng)格項(xiàng)目跨越行列
網(wǎng)格項(xiàng)目默認(rèn)都占用一行和一列，但可以使用前一節(jié)中定位項(xiàng)目的屬性來(lái)指定項(xiàng)目跨越多行或多列。
例5：
通過(guò)grid-column-start和grid-column-end屬性值的設(shè)置，使該網(wǎng)格項(xiàng)目跨越多列。
五、justify-content 屬性，align-content 屬性
justify-content屬性是整個(gè)內(nèi)容區(qū)域在容器里面的水平位置（左中右），align-content屬性是整個(gè)內(nèi)容區(qū)域的垂直位置（上中下）。
這兩個(gè)屬性的寫(xiě)法完全相同，都可以取下面這些值。（下面的圖都以justify-content屬性為例，align-content屬性的圖完全一樣，只是將水平方向改成垂直方向。）
start - 對(duì)齊容器的起始邊框。
end - 對(duì)齊容器的結(jié)束邊框。
center - 容器內(nèi)部居中。
stretch - 項(xiàng)目大小沒(méi)有指定時(shí)，拉伸占據(jù)整個(gè)網(wǎng)格容器。
space-around - 每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與容器邊框的間隔大一倍。
space-between - 項(xiàng)目與項(xiàng)目的間隔相等，項(xiàng)目與容器邊框之間沒(méi)有間隔。
space-evenly - 項(xiàng)目與項(xiàng)目的間隔相等，項(xiàng)目與容器邊框之間也是同樣長(zhǎng)度的間隔。
六、grid-auto-columns 屬性，grid-auto-rows 屬性
有時(shí)候，一些項(xiàng)目的指定位置，在現(xiàn)有網(wǎng)格的外部。比如網(wǎng)格只有3列，但是某一個(gè)項(xiàng)目指定在第5行。這時(shí)，瀏覽器會(huì)自動(dòng)生成多余的網(wǎng)格，以便放置項(xiàng)目。
grid-auto-columns屬性和grid-auto-rows屬性用來(lái)設(shè)置，瀏覽器自動(dòng)創(chuàng)建的多余網(wǎng)格的列寬和行高。它們的寫(xiě)法與grid-template-columns和grid-template-rows完全相同。如果不指定這兩個(gè)屬性，瀏覽器完全根據(jù)單元格內(nèi)容的大小，決定新增網(wǎng)格的列寬和行高。
希望我的文章能夠?qū)δ兴鶐椭?/strong>
歡迎大家滴滴我：rgz987
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/114718.html
摘要：一概述網(wǎng)格布局是一套二維的頁(yè)面布局系統(tǒng)，它的出現(xiàn)將完全顛覆頁(yè)面布局的傳統(tǒng)方式。接下來(lái)，我們從網(wǎng)格容器到網(wǎng)格項(xiàng)的各個(gè)基本屬性來(lái)介紹網(wǎng)格布局。例網(wǎng)格項(xiàng)目按行排列，網(wǎng)格項(xiàng)目寬度由自身寬度決定。這時(shí)，瀏覽器會(huì)自動(dòng)生成多余的網(wǎng)格，以便放置項(xiàng)目。 一、概述 CSS網(wǎng)格布局（Grid）是一套二維的頁(yè)面布局系統(tǒng)，它的出現(xiàn)將完全顛覆頁(yè)面布局的傳統(tǒng)方式。 首先來(lái)介紹幾個(gè)概念: 想象一個(gè)三行三列的布局，網(wǎng)格...
摘要：簡(jiǎn)言網(wǎng)格布局是一套二維的頁(yè)面布局系統(tǒng)，它的出現(xiàn)將完全顛覆頁(yè)面布局的傳統(tǒng)方式。例用屬性和定義網(wǎng)格，同時(shí)定義網(wǎng)格線名稱。例一組區(qū)域名稱要放在單引號(hào)或雙引號(hào)內(nèi)，每一個(gè)名稱之間以空格分隔。例本例中，是通過(guò)隱式網(wǎng) 簡(jiǎn)言 CSS網(wǎng)格布局（Grid）是一套二維的頁(yè)面布局系統(tǒng)，它的出現(xiàn)將完全顛覆頁(yè)面布局的傳統(tǒng)方式。傳統(tǒng)的CSS頁(yè)面布局 一直不夠理想。包括table布局、浮動(dòng)、定位及內(nèi)聯(lián)塊等方式，從本質(zhì)...
摘要：重復(fù)網(wǎng)格區(qū)域的名稱導(dǎo)致內(nèi)容跨越這些單元格。中間一排將由兩個(gè)區(qū)域，一個(gè)是空單元格，一個(gè)區(qū)域組成。你可以使用任意數(shù)量的相鄰的點(diǎn)來(lái)聲明單個(gè)空單元格。只要這些點(diǎn)之間沒(méi)有空隙隔開(kāi)，他們就代表一個(gè)單獨(dú)的單元格。? CSS Grid 布局是 CSS 中最強(qiáng)大的布局系統(tǒng)。與 flexbox 的一維布局系統(tǒng)不同，CSS Grid 布局是一個(gè)二維布局系統(tǒng)，也就意味著它可以同時(shí)處理列和行。通過(guò)將 CSS 規(guī)則應(yīng)用...
摘要：的個(gè)值表示三列，相應(yīng)的數(shù)值表示列寬即都為。嘗試其它布局把移到右邊實(shí)現(xiàn)后的效果使用點(diǎn)來(lái)創(chuàng)建空白的網(wǎng)格單元格實(shí)現(xiàn)效果真正的響應(yīng)式布局假設(shè)你想在移動(dòng)設(shè)備上查看的是標(biāo)題旁邊是菜單。 常用Grid布局屬性介紹 下面從一個(gè)簡(jiǎn)單Grid布局例子說(shuō)起。 CSS Grid 布局由兩個(gè)核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實(shí)際的 grid(網(wǎng)格)，items...
摘要：最精彩的地方在于所有的響應(yīng)特性被添加到了一行代碼中?；A(chǔ)響應(yīng)單位柵格布局帶來(lái)了一個(gè)全新的值單位，單位通常簡(jiǎn)寫(xiě)為，它允許你根據(jù)需要將容器拆分為多個(gè)塊。 原文地址: https://medium.com/free-code-...原文作者: Per Harald Borgen 翻譯作者: hanxiansen showImg(https://segmentfault.com/img/re...
閱讀 721·2021-10-09 09:41
閱讀 707·2019-08-30 15:53
閱讀 1139·2019-08-30 15:53
閱讀 1270·2019-08-30 11:01
閱讀 1634·2019-08-29 17:31
閱讀 1057·2019-08-29 14:05
閱讀 1782·2019-08-29 12:49
閱讀 468·2019-08-28 18:17
