資訊專欄INFORMATION COLUMN
摘要：布局兼容性支持老的語法目前大多數的瀏覽器實現了支持或者停留在實驗特性基本概念網格容器網格項網格項網格軌道網格單元網格區的屬性定義在容器的屬性生成塊級網絡生成行內網絡作為網格項需要繼承父網格的行列大
GRID布局 兼容性
IE10 IE11 支持老的語法
目前大多數的瀏覽器實現了支持, 或者停留在實驗特性
Grid Container 網格容器
Grid Item 網格項
Grid Line 網格項
Grid Track 網格軌道
Grid Cell 網格單元
Grid Area 網格區
定義在容器的屬性 display grid-template-columns grid-template-rows grid-template-areas grid-column-gap grid-row-gap grid-gap justify-items align-items justify-content align-content grid-auto-columns grid-auto-rows grid-auto-flow grid
display
grid 生成塊級網絡 inline-grid 生成行內網絡 subgrid 作為網格項需要繼承父網格的行列大小
grid-template-columns grid-template-columns 設置行和列的大小
grid-template-columns: 40px 50px auto 50px 40px ;
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
// line-name track-size line-name 在行軌道或列軌道兩邊是網格線
grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end]; // 網格線double name
grid-template-columns: repeat(3, 20px [col-start]) 5%; // 等價于下面的表達
grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
grid-template-columns: repeaat(3, 1fr); // 將容器分為三等份
grid-template-columns: 1fr 50px 1fr 1fr; // fr 的行列將劃分剩余部分
grid-template-areas
通過獲取網格項中的grid-area屬性值（名稱），來定義網格模版。重復網格區（grid-area）名稱將跨越網格單元格，‘.’代表空網格單元
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"
}
.item-a{
grid-area: header;
}
.item-b{
grid-area: main;
}
.item-c{
grid-area: sidebar;
}
.item-d{
grid-area: footer;
}
grid-gap: grid-row-gap 和 grid-column-gap 的簡寫
justify-items
垂直于列網格線對齊
start end center stretch(默認)
align-items
垂直于行網格線對齊
start end center stretch
justify-content
使用px等非彈性單位定義, 總網格區域大小可能會小于網格容器, 設置網格橫向對其方式
start 頂部對齊 end 底部對齊 center 居中對齊 stretch 填滿網格容器 space-around 網格項兩邊間距相等，網格項之間間隔是單側的2倍 space-between 兩邊對齊, 網格項之間間隔相等 space-evenly 網格項間隔相等
align-content
grid-auto-columns grid-auto-rows
自動生成隱式網格軌道, 當定位網格超出網格容器的范圍時, 將自動創建隱式網絡軌道
grid-auto-flow
row 按照行依次從左到右排列 column 按照列依次從上到下排列 dense 按先后順序排列
grid
grid: 200px auto / 1fr auto 1fr;Item的屬性
grid-column grid-column-start grid-column-end 的縮寫
grid-row grid-row-start grid-row-end 的縮寫
grid-area 父容器定義的 grid-template-areas
justify-self
align-self
justify-self 定義單個網格項垂直于列網格線的對齊方式
start: 網格區域左對齊 end: 網格區域右對齊 center: 網格區域居中 stretch: 網格區域填滿(默認)
align-self 定義單個網格項垂直于行網格線的對齊方式
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114674.html
摘要：瀏覽器兼容性網格布局從開始收到支持，微軟在會更新對網格布局的支持。微軟的瀏覽器和有一種比較舊的實現，所以有不少限制，我們會簡單介紹新的實現方式和老的實現方式之間的區別，這樣你能知道如何規避他們。 原文地址：Getting to know CSS Grid Layout 原文作者：Chris Wright 譯者：華翔 校對者：珂珂、干干 翻譯 | CSS網格（CSS Grid）布局入...
摘要：網格單元格被劃分之后每一個格子就是單元格，也是布局的最小單位。網格區域若干個單元格拼接而成的區域。網格間隙單元格與單元格之間的距離，可以垂直也可以水平。 前言 CSS網格布局用于將頁面分割成數個主要區域，或者用來定義組件內部元素間大小、位置和圖層之間的關系。像表格一樣，網格布局讓我們能夠按行或列來對齊元素。 但是，使用CSS網格可能還是比CSS表格更容易布局。 例如，網格容器的子元素可...
摘要：簡介網格布局又稱網格，是一種二維網格布局系統。在處理網頁布局方面一直做的不是很好。網格容器中的所有子元素就會自動變成網格項目網格線組成網格線的分界線。 簡介 CSS網格布局（又稱網格），是一種二維網格布局系統。CSS在處理網頁布局方面一直做的不是很好。一開始我們用的是table（表格）布局，然后用float(浮動)，position（定位）和inline-block（行內塊）布局，但是...
摘要：和絕對定位和絕對定位如果父容器有定位標識等，那么下面的子會根據原始它們應該布局的位置定位，反之如果父容器沒有定位標識，那么應用了會脫離布局，并且按照傳統的方式布局?；靖拍?MDN上的解釋是這樣的 CSS Grid Layout excels at dividing a page into major regions or defining the relationship in term...
摘要：代碼如下頁面內容樣式接下來，將側邊欄和主內容區域使用一個包含起來。列和行布局部分橫跨所有的列。也可以使用簡寫，起始值和結束值位于同一行上，并用斜杠分隔。設計方法總結以上的布局設計中，使用了來進行整體布局以及設計中的非線性部分。 CSS 浮動屬性一直是網站上排列元素的主要方法之一，但是當實現復雜布局時，這種方法不總是那么理想。幸運的是，在現代網頁設計時代，使用 Flexbox 和 CSS...
摘要：基于網格線的占位區網格中的單元格是有網格線劃分出來的，那么在網格布局中，同樣可以使用網格線來給子元素設置占位區域。也就是說這四條網格線間的區域是一個單元格。 CSS Grid布局對于我等來說就是一個全新的布局，但國外很多同行朋友已對這種布局做了全面的探知。前面花了兩篇內容（《CSS Grid布局：什么是網格布局》和《[CSS Grid布局：瀏覽器開啟CSS Grid Layout]ht...
閱讀 2286·2021-11-10 11:35
閱讀 898·2021-09-26 09:55
閱讀 2387·2021-09-22 15:22
閱讀 2318·2021-09-22 15:17
閱讀 3680·2021-09-09 09:33
閱讀 1821·2019-08-30 11:22
閱讀 970·2019-08-30 10:57
閱讀 641·2019-08-29 16:10
