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