grid柵格佈局

来源:http://www.cnblogs.com/xiaohuochai/archive/2017/06/27/7083153.html
-Advertisement-
Play Games

[1]引入 [2]display [3]顯式網格 [4]間距 [5]網格線 [6]網格線命名 [7]網格區域命名 [8]隱式網格 [9]隱式命名 [10]網格項目層級 [11]對齊 ...


前面的話

　　Grid佈局方式借鑒了平面裝幀設計中的格線系統，將格線運用在屏幕上，而不再是單一的靜態頁面，可以稱之為真正的柵格。本文將詳細介紹grid佈局

 

引入

　　對於Web開發者來說，網頁佈局一直是個比較重要的問題。但實際上，在網頁開發很長的一段時間當中，我們甚至沒有一個比較完整的佈局模塊。總的來說 Web 佈局經歷了以下四個階段：

　　1、table表格佈局，通過 Dreamweaver 拖拽表格或者手寫 table 標簽佈局

　　2、float浮動及position定位佈局，藉助元素元素盒模型本身的特性以及 float position 等屬性等進行佈局

　　3、flex彈性盒模型佈局，革命性的突破，解決傳統佈局方案上的三大痛點 排列方向、對齊方式，自適應尺寸。是目前最為成熟和強大的佈局方案

　　4、grid柵格佈局，二維佈局模塊，具有強大的內容尺寸和定位能力，適合需要在兩個維度上對齊內容的佈局

　　Grid Layout 是一種基於二維網格的佈局系統，旨在完全改變我們設計基於網格的用戶界面的方式，彌補網頁開發在二維佈局能力上的缺陷

　　與flex分為伸縮容器和伸縮項目類似，grid也分為網格容器和網格項目

 

網格容器

display

　　通過display屬性設置屬性值為grid或inline-grid可以創建一個網格容器。網格容器中的所有子元素就會自動變成網格項目（grid item）

display: grid
display: inline-grid

　　網格項目預設放在行中，並且跨網格容器的全寬

 

顯式網格

　　使用grid-template-columns和grid-template-rows屬性可以顯式的設置一個網格的列和行 

【grid-template-rows】

　　預設值為none

　　grid-template-rows指定的每個值可以創建每行的高度。行的高度可以是任何非負值，長度可以是px、%、em等長度單位的值

grid-template-rows: 60px 40px

　　item1和item2具有固定的高，分別為60px和40px。因為只定義了兩個行的高度值，所以item3和item4的高度是根據其自身的內容來定義。

【grid-template-columns】

　　預設值為none

　　像行一樣，通過grid-template-columns指定的每個值來創建每列的列寬

grid-template-columns: 40px 50px 60px

　　item4和item5放置在新的一行（第二行），因為grid-template-columns只定義了三列的大小，它們也分別放置在列1、列2和列3；其中列1、列2和列3的尺寸大小等於item1、item2和item3寬度。item1、item2和item3具有固定的寬度值，分別為40px、50px和60px

【fr】

　　fr單位可以幫助我們創建一個彈列的網格軌道。它代表了網格容器中可用的空間（就像Flexbox中無單位的值）

grid-template-columns: 1fr 1fr 2fr

　　在這個示例中，網格容器分成了4等份（1 + 1 + 2 = 4），每一份（1fr）是網格容器寬度的四分之一。所以item1和item2的寬度是網格容器的四分之一寬，item3是網格容器寬度的四分之二（2fr）

grid-template-columns: 3rem 25% 1fr 2fr

　　當fr和其它長度單位的值結合在一起的時候，fr是基於網格容器可用空間來計算。

　　在這個示例中，網格容器可用空間是網格寬度減去3rem和25%剩下的寬度，而fr就是基於這個尺寸計算：

1fr = (網格寬度 - 3rem - 網格寬度 * 25%) / 3

【minmax()】

　　可以通過minmax()函數來創建網格軌道的最小或最大尺寸。minmax()函數接受兩個參數：第一個參數定義網格軌道的最小值，第二個參數定義網格軌道的最大值。可以接受任何長度值，也接受auto值。auto值允許網格軌道基於內容的尺寸拉伸或擠壓

grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;

　　在這個示例中，第一行的高度最小值是100px，但其最大值為auto，允許行的高度可以變大超過100px。第一列設置了最小值為auto，但它的最大值是50%，也就是列的最大寬度不會超過網格容器寬度的50%

【repeat()】

　　使用repeat()可以創建重覆的網格軌道。這個適用於創建相等尺寸的網格項目和多個網格項目。repeat()接受兩個參數：第一個參數定義網格軌道應該重覆的次數，第二個參數定義每個軌道的尺寸。

grid-template-rows: repeat(3, 1fr);    
grid-template-columns: 30px repeat(3, 1fr) 30px;

　　在這個示例中，第一列和最後一列的寬度都是30px，並且它們之間有另列三列，這三列是通過repeat()來創建的，而且每列的列寬是1fr（1fr = (網格寬度 - 30px - 30px) / 3）

 

間距

【grid-column-gap】 

　　創建列與列之間的間距

【grid-row-gap】

　　創建行與行之間的間距

【grid-gap】

　　預設值為0

　　grid-gap是grid-row-gap和grid-column-gap兩個屬性的縮寫，如果它指定了兩個值，那麼第一個值是設置grid-row-gap的值，第二個值設置grid-column-gap的值。如果只設置了一個值，表示行和列的間距相等，也就是說grid-row-gap和grid-column-gap的值相同

　　[註意]grid-gap只能創建列與列或行與行之間的間距，但不能創建列和行與網格容器邊緣的間距

　　間距(Gap)可以設置任何非負值，長度值可以是px、%、em等單位值

 

網格項目

網格線

【grid-row-start】

【grid-row-end】

【grid-column-start】

【grid-column-end】

　　預設值為auto

　　通過網格線可以定位網格項目。網格線實際上是代表線的開始、結束，兩者之間就是網格列或行。每條線是從網格軌道開始，網格的網格線從1開始，每條網格線逐步增加1

grid-row-start: 2;
grid-row-end: 3; 
grid-column-start: 2; 
grid-column-end: 3;　 

　　兩列三行的網格創建三條列網格線和四條行網格線。item1就是由行和列的號碼重新定位。如果一個網格項目跨度只有一行或一列，那麼grid-row-end和grid-olumn-end不是必需的

【grid-row】

【grid-column】

grid-row: 2; 
grid-column: 3 / 4;

　　grid-row是grid-row-start和grid-row-end的簡寫。grid-column是grid-column-start和grid-column-end的簡寫。如果只提供一個值，則指定了grid-row-start(grid-column-start)值；如果提供兩個值，第一個值是grid-row-start(grid-column-start)的值，第二個值是grid-row-end(grid-column-end)的值，兩者之間必須要用/隔開

　　預設值為auto

【span】

　　關鍵詞span後面緊隨數字，表示合併多少個列或行

grid-row: 1 / span 3;
grid-column: span 2;

【grid-area】

grid-area: 2 / 2 / 3 / 3;

　　如果指定四個值，第一個值對應grid-row-start，第二個值對應grid-column-start，第三個值對應grid-row-end，第四個值對應grid-column-end

 

網格線命名

　　通過grid-template-rows和grid-template-columns定義網格時，網格線可以被命名。網格線名稱也可以設置網格項目位置

　　分配網格線名稱必須用方括弧[網格線名稱]，然後後面緊跟網格軌道的尺寸值。定義網格線名稱時需要避免使用規範中出現的關鍵詞，以免導致混亂。

grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];

　　可以在方括弧中添加多個名稱來命名網格線名稱，使用多外名稱命名網格線名稱時，名稱間要用空格隔開。每一個網格線的名稱可以用來定位網格項目的位置

grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end]; 
grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];

　　使用網格線名稱設置網格項目位置和使用網格線號碼設置網格項目位置類似，引用網格線名稱的時候不應該帶方括弧

　　使用repeat()函數可以給網格線分配相同的名稱。這可以節省一定的時間。

grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);

　　使用repeat()函數可以給網格線命名，這也導致多個網格線具有相同的網格線名稱。相同網格線名稱指定網格線的位置和名稱，也且會自動在網格線名稱後面添加對應的數字，使其網格線名稱也是唯一的標識符

　　使用相同的網格線名稱可以設置網格項目的位置。網格線的名稱和數字之間需要用空格分開 

grid-row: row-start 2 / row-end 3;
grid-column: col-start / col-start 3;

 

網格區域命名

【grid-template-areas】

　　像網格線名稱一樣，網格區域的名稱可以使用grid-template-areas屬性來命名。引用網格區功能變數名稱稱也可以設置網格項目位置

grid-template-areas:   "header header"   "content sidebar"    "footer footer";
grid-template-rows:    150px 1fr 100px;
grid-template-columns: 1fr 200px;

　　設置網格區域的名稱應該放置在單引號或雙引號內，每個名稱由一個空格符分開。網格區域的名稱，每組（單引號或雙引號內的網格區功能變數名稱稱）定義了網格的一行，每個網格區功能變數名稱稱定義網格的一列

　　[註意]grid-template-areas: "header header" "content sidebar" "footer footer";不可以簡寫為grid-template-areas: "header" "content sidebar" "footer";

　　grid-row-start、grid-row-end、grid-column-start和grid-column-end以及簡寫的grid-row、grid-column、grid-area都可以引用網格區功能變數名稱稱，用來設置網格項目位置

 

隱式網格

【grid-auto-flow】

　　網格預設流方向是row，可以通過grid-auto-flow屬性把網格流的方向改變成column　　 

grid-auto-flow: column

　　當網格項目確認在顯式網格之外時就會創建隱性網格，當沒有足夠的空間或者顯式的網格軌道來設置網格項目，此時網格項目就會自動創建隱式網格

【grid-auto-rows】

【grid-auto-columns】

　　使用grid-auto-rows和grid-auto-columns屬性可以定義隱式的網格

　　預設值為auto

grid-template-rows:    70px;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows:        140px;

　　在上面這個例子中我們只定義了一行（軌道），所以item1和item2的高都是70px。第二行（軌道）自動創建了item3和item4空間。grid-auto-rows定義隱式網格中的行（軌道）的大小，因此item3和item4的高度是140px

 

隱式命名

【隱式命名網格區功能變數名稱稱】

　　通常可以將網格線命名成任何想命名的名稱，如果網格線名稱添加-start和-end的尾碼，其實也隱式的創建一個網格區域，可以用來設置網格項目的位置

grid-template-rows:    [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];
grid-template-columns: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [inner-end];

　　在這個示例中，行和列都具有inner-start和inner-end網格線名稱，同時也對應的創建一個隱式網格區功能變數名稱稱inner

grid-area: inner

　　網格項目定位可以通過網格區功能變數名稱稱來設置，而不需要使用網格線名稱

【隱式命名網格線名稱】

　　隱式的指定網格線反向指定了隱式的網格區功能變數名稱稱，命名的網格區域隱式的命名了網格線名稱 

grid-template-areas:   "header header" "content sidebar" "footer footer";
grid-template-rows:    80px 1fr 40px;
grid-template-columns: 1fr 200px;

　　指定網格區域會給網格區域邊線添加隱式的網格線名稱。這些網格線的命名是基於網格區域來命名，只是在網格區功能變數名稱稱的後面添加尾碼-start或-end

grid-row-start: header-start; 
grid-row-end: content-start; 
grid-column-start: footer-start; 
grid-column-end: sidebar-end;

　　在這個示例中，header通過隱式的網格線名稱設置其位置

 

網格項目層級

　　網格項目可以具有層級和堆棧，必要時可能通過z-index屬性來指定 

.item-1,.item-2 {
    grid-row-start:  1;
    grid-column-end: span 2;
}
.item-1 { 
    grid-column-start: 1; 
    z-index: 1; 
}
.item-2 { 
    grid-column-start: 2 
}

　　在這個例子中，item1和item2的開始行都是1，item1列的開始是1，item2列的開始是2，並且它們都跨越兩列。兩個網格項目都是由網格線數字定位，結果這兩個網格項目重疊了。

　　預設情況下，item2在item1上面，但是，我們在item1中設置了z-index:1;，導致item1在item2之上

 

對齊

【網格項目對齊方式（Box Alignment）】

　　CSS的Box Alignment Module補充了網格項目沿著網格行或列軸對齊方式。

【justify-items】

【justify-self】

　　justify-items和justify-self指定網格項目沿著行軸對齊方式；align-items和align-self指定網格項目沿著列軸對齊方式。

　　justify-items和align-items應用在網格容器上

【align-items】

【align-self】

　　align-self和justify-self屬性用於網格項目自身對齊方式

　　這四個屬性主要接受以下屬性值：

auto | normal | start | end | center | stretch | baseline | first baseline | last baseline

【網格軌道對齊方式】

　　網格軌道對齊可以相對於網格容器行和列軸。

　　align-content指定網格軌道沿著行軸對齊方式；justify-content指定網格軌道沿著列軸對齊方式。它們支持下麵屬性：

normal | start | end | center | stretch | space-around | space-between | space-evenly | baseline | first baseline | last baseline

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • CSS3,transform3D立體可拖拽正方體實現原理
    恢復內容開始 今天咱們來說一下,CSS中的3D效果 .如果你把transform真的掌握的和純熟的話,就可以直接通過CSS做出很多很炫酷的效果,甚至.輪播圖和選項卡都可以通過CSS來做,咱們明天就說如何運用CSS來做輪播圖,大家記得看哦! 很好,話不多說,翠花'上代碼': 圖片沒有的話就其他的代替哦 ...
  • CSS reset
    前面的話 大部分的時候，作為前端，我們在寫 CSS 樣式之前，需要添加一份 reset.css 。CSS reset不僅用於清除預設樣式，更是一種全局樣式定義。如果項目前期不定製好CSS reset，後期維護階段再對其進行修改，將會牽一發而動全身。本文將詳細介紹CSS reset reset 以網易 ...
  • 底部固定，高度自動，跟隨滾動條滾動
    現在的樣式，看起來簡單，但裡面深奧的東西太多，套路太多，還是自己不夠聰明呀！！！ ...
  • JS之 if語句函數 對接事件動作 函數更改css css對接需要換妝的區id或class
    if 函數的實現步驟: function +名字() 指定id , 指定開關(display: none or block) if + else 構成邏輯 控制開關 決定在哪裡安置一個燈泡, 指定一個id給某個標簽 把開關用電線連著燈泡, 安裝開關 #+id名稱{ 屬性1= 賦值, 屬性 2 = 賦... ...
  • Angular的生命周期鉤子
    沒有什麼不能用一張圖來解決。 ...
  • 用vue開發一個app（1，基礎環境配置）
    在今天之前，我沒有很系統的看過，學習過vue。也是第一次嘗試用vue寫個小應用 現在開始研究配環境 這邊參考的是https://cn.vuejs.org/v2/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7 ...
  • angular排序
    說點小案例angular的排序 ...
  • JS中的繼承方式總結
    1. 原型鏈繼承 Child.prototype = new Parent(); 2. call(thisObj, param1, param2,...) 3. apply(thisObj, [param1,param2,...]) 4. 組合繼承(call+原型鏈 / apply+原型鏈) 5.寄 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類