CSS Grid 佈局是 CSS 中最強大的佈局系統。與 flexbox 的一維佈局系統不同，CSS Grid 佈局是一個二維佈局系統，也就意味著它可以同時處理列和行。通過將 CSS 規則應用於 父元素 (成為 Grid Container 網格容器)和其 子元素（成為 Grid Items 網格項），你就可以輕鬆使用 Grid(網格) 佈局。

如果你剛剛接觸 CSS Grid 佈局，那麼我強烈建議你首先閱讀 《5分鐘學會 CSS Grid 佈局》這篇文章作為你的最簡入門。當你對 CSS Grid 佈局有了基本的認識之後，再來閱讀這篇指南，然後閱讀 如何使用 CSS Grid 快速而又靈活的佈局

 讓你體會 Grid 佈局真正的強大和靈活。

簡介

CSS Grid(網格) 佈局（又稱為 “Grid(網格)” ），是一個二維的基於網格的佈局系統它的目標是完全改變我們基於網格的使用者介面的佈局方式。CSS 一直用來佈局我們的網頁，但一直以來都存在這樣或那樣的問題。一開始我們用表格（table），然後是浮動（float），再是定位（postion）和內嵌塊（inline-block），但是所有這些方法本質上都是隻是 hack 而已，並且遺漏了很多重要的功能（例如垂直居中）。Flexbox 的出現很大程度上改善了我們的佈局方式，但它的目的是為了解決更簡單的一維佈局，而不是複雜的二維佈局（實際上 Flexbox 和 Grid 能結合在一起工作，而且配合得非常好）。Grid(網格) 佈局是第一個專門為解決佈局問題而建立的 CSS 模組，我們終於不需要想盡辦法hack 頁面佈局樣式了。

有兩個主要的事情啟發我建立了本指南。第一個是 Rachel Andrew 出色的書籍 為CSS網格佈局做好準備。這本書徹底，清晰的介紹 CSS Grid(網格) ，也是本指南的基礎。我強烈建議你購買並閱讀。另一個靈感來自 Flexbox 完整指南 ，（愚人碼頭注：如果你讀英文吃力，可以通過 CSS3 Flexbox屬性視覺化指南 來學習，講的也非常好理解）這也是我學習 flexbox 經常前往的資源。這篇文章是幫助了很多人，顯然是因為 Google “flexbox” 排名第一。你會發現它和我的文章有很多相似之處，為什麼不跟從最好的呢？

本指南的目的是介紹存在於最新版本的規範中 Grid(網格) 概念。所以我不會覆蓋過時的 IE 語法，而且隨著規範的逐漸成熟，我會盡我最大的努力去更新這個指南。

基礎知識和瀏覽器支援

首先，你必須使用 display: grid 將容器元素定義為一個 grid(網格) 佈局，使用 grid-template-columns 和 grid-template-rows 設定 列 和 行 的尺寸大小，然後通過 grid-column 和 grid-row 將其子元素放入這個 grid(網格) 中。與 flexbox 類似，網格項（grid items）的源順序無關緊要。你的 CSS 可以以任何順序放置它們，這使得使用 媒體查詢（media queries）重新排列網格變得非常容易。定義整個頁面的佈局，然後完全重新排列布局以適應不同的螢幕寬度，這些都只需要幾行 CSS ，想象一下就讓人興奮。Grid(網格) 佈局是有史以來最強大的CSS模組之一。

截至2017年3月，許多瀏覽器都提供了對 CSS Grid 的原生支援，而且無需加瀏覽器字首：Chrome（包括 Android ），Firefox，Safari（包括iOS）和 Opera 。 另一方面，Internet Explorer 10和11支援它，但是是一個過時的語法實現。 Edge 已經宣佈支援，但還沒有到來。（愚人碼頭注：翻譯這篇文章時，Edge 16 已經支援）。

這個瀏覽器支援資料來自 Caniuse ，你可以檢視更多的細節。 數字表示支援以上功能的瀏覽器版本號。

桌面(Desktop) 瀏覽器

Chrome	Opera	Firefox	IE	Edge	Safari
57	44	52	11*	16	10.1

手機(Mobile) / 平板(Tablet)瀏覽器

iOS Safari	Opera Mobile	Opera Mini	Android	Android Chrome	Android Firefox
10.3	No	No	62	62	57

除了微軟之外，瀏覽器廠商似乎還沒有對 Grid(網格) 搞自己的一套實現（比如加字首），直到規範完全成熟。這是一件好事，因為這意味著我們不必擔心學習多個語法。

在生產中使用 Grid 只是時間問題。 但現在是學習的時候了。

重要術語

在深入瞭解 Grid(網格) 的概念之前，理解術語是很重要的。由於這裡涉及的術語在概念上都很相似，如果不先記住 Grid(網格) 規範定義的含義，很容易混淆它們。但是別擔心，術語並不多。

網格容器(Grid Container)

應用 display: grid 的元素。這是所有網格項（Grid Items）的直接父級元素。在這個例子中，container 就是 網格容器(Grid Container)。

HTML 程式碼:
<div class="container">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>

網格項(Grid Item)

網格容器（Grid Container）的子元素（例如直接子元素）。這裡 item 元素就是網格項(Grid Item)，但是 sub-item 不是。

HTML 程式碼:
<div class="container">
<div class="item"></div>
<div class="item">
<p class="sub-item"></p>
</div>
<div class="item"></div>
</div>

網格線(Grid Line)

構成網格結構的分界線。它們既可以是垂直的（“列網格線(column grid lines)”），也可以是水平的（“行網格線(row grid lines)”），並位於行或列的任一側。例如，這裡的黃線就是一條列網格線。

網格軌道(Grid Track)

兩條相鄰網格線之間的空間。你可以把它們想象成網格的列或行。下圖是第二條和第三條 行網格線 之間的 網格軌道(Grid Track)。

網格單元格(Grid Cell)

兩個相鄰的行和兩個相鄰的列網格線之間的空間。這是 Grid(網格) 系統的一個“單元”。下圖是第1至第2條 行網格線 和第2至第3條 列網格線 交匯構成的 網格單元格(Grid Cell)。

網格區域(Grid Area)

4條網格線包圍的總空間。一個 網格區域(Grid Area) 可以由任意數量的 網格單元格(Grid Cell) 組成。下圖是 行網格線1和3，以及列網格線1和3 之間的網格區域。

Grid(網格) 屬性目錄

網格容器(Grid Container) 屬性

網格項(Grid Items) 屬性

父元素 網格容器(Grid Container) 屬性

display

將元素定義為網格容器，併為其內容建立新的 網格格式上下文。

值：

• grid ：生成一個塊級網格
• inline-grid ：生成一個內聯網格
• subgrid ：如果你的網格容器本身是另一個網格的網格項（即巢狀網格），你可以使用這個屬性來表示
    你希望它的行/列的大小繼承自它的父級網格容器，而不是自己指定的。

如果你想要設定為網格容器元素本身已經是網格項（巢狀網格佈局），用這個屬性指明這個容器內部的網格項的行列尺寸直接繼承其父級的網格容器屬性。

CSS 程式碼:
.container {
    display: grid |inline-grid | subgrid;
}

注意：在 網格容器(Grid Container) 上使用column，float，clear， vertical-align 不會產生任何效果。

回到目錄

grid-template-columns / grid-template-rows

使用空格分隔的值列表，用來定義網格的列和行。這些值表示 網格軌道(Grid Track) 大小，它們之間的空格表示網格線。

值：
– <track-size>： 可以是長度值，百分比，或者等份網格容器中可用空間（使用 fr 單位）
– <line-name>：你可以選擇的任意名稱

CSS 程式碼:
.container {
    grid-template-columns:<track-size>...|<line-name><track-size>...;
    grid
            
  
           

              
              
            
            
相關推薦
			   
            
            
            
 

    

    
    
CSS Grid 佈局完全指南(圖解 Grid 詳細教程)
     
 
                



CSS Grid 佈局是 CSS 中最強大的佈局系統。與 flexbox 的一維佈局系統不同，CSS Grid 佈局是一個二維佈局系統，也就意味著它可以同時處理列和行。通過將 CSS 規則應用於 父元素 (成為 Grid Container 網格容器)和其 子元素（成 

  
 

    

    
    
CSS Grid 佈局完全指南
     
 
                





CSS Grid 佈局是 CSS 中最強大的佈局系統。與 flexbox 的一維佈局系統不同，CSS Grid 佈局是一個二維佈局系統，也就意味著它可以同時處理列和行。通過將 CSS 規則應用於 父元素 (成為 Grid Container 網格容器) 

  
 

    

    
    
第四篇部落格 CSS Grid 佈局基礎
     
  
  
  
   wcphahaha
   
  
    
   
  
 
 
  
   
   CSS Grid 佈局基礎 
    
    grid 關鍵詞解釋 
     
      
    grid-template-columns: repeat(3,  

  
 

    

    
    
css grid 佈局 ( 入門 )
     
  
 
 簡介： 
      Grid是一個強大的規範，當與CSS的其他部分（如flexbox）結合使用時，可以幫助您建立以前不可能在CSS中構建的佈局（二維佈局）。這一切都是通過在網格容器上建立一個網格來開始的。網格元素的子集 預設會有16px的padding值 
 使用&n 

  
 

    

    
    
【CSS】css grid 佈局
     
  
 
 css grid佈局出來很久了，可以翻譯成柵欄佈局，或者網格佈局，看到了一個很好的應用，所以寫下此篇基礎教程。
 比如我們要達到下面這樣一個效果要怎麼做？
 
 
 圖中有16個元素，我們要其自適應寬度，按照我們以前的想法肯定是直接通過media，媒體查詢來完成這個，但是程式碼肯定不會簡潔，但是我們 

  
 

    

    
    
css grid佈局demo詳解
     
 
                示例1：<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=dev 

  
 

    

    
    
CSS Grid布局指南
     
 並且   ready   ive   直接   屬性   自動   定位   play   更改   簡介
CSS Grid布局 （又名"網格"），是一個基於二維網格布局的系統，主要目的是改變我們基於網格設計的用戶接口方式。如我們所知，CSS 總是用於網頁的樣式設置，但它並沒有起到很好的作用。剛開始的時候我們 

  
 

    

    
    
CSS網格佈局（Grid）完全教程
     
 
							
							
							本文譯自《A Complete Guide to Grid》。由於譯者水平有限，如有錯誤，請不吝指正。文中所有圖的版權歸原作者所有。

導語：CSS網格佈局是目前CSS中可用的最強大的佈局系統。它是二維繫統，即可以處理行和列，不像flexbox只是一維繫統。我們 

  
 

    

    
    
CSS Grid 網格佈局
     
 網格 
網格是一個成熟的設計工具，許多現代網站佈局是基於規則網格。在本文中，我們將看看基於網格的設計，以及如何使用CSS來建立網格——兩者都通過現在的工具，和剛剛開始在瀏覽器中可用的新技術。 
什麼是網格佈局？ 
網格僅僅是由水平和垂直線集合建立的一個模式，我們可以根據這個模式排列我們的設計元素。它們幫助我們 

  
 

    

    
    
《CSS網站佈局實錄-基於Web標準的網站設計指南（第2版）》李超.掃描版.pdf
     
  
 
  
 書籍簡介： 
 《CSS網站佈局實錄-基於Web標準的網站設計指南（第2版）》是一本講述基於web標準的應用css進行網站佈局設計與重構的典範之作。 《CSS網站佈局實錄-基於Web標準的網站設計指南（第2版）》以例項為主，一步步地告訴大家如何進行符合web 2.0標準的css佈局設計。具備了 

  
 

    

    
    
使用 CSS Grid 實現表單佈局的優勢
     
  
  
  
 表單佈局和設計一直是網頁設計和開發中令人頭疼的一部分。 嘗試過寫 <select> 標籤的樣式，或者在所有瀏覽器中都居中一個 label 的人感觸肯定更深。 
  
  原文連結：https://www.sitepoint.com/css-grid-web-form-layout 

  
 

    

    
    
前端每日實戰：142# 視訊演示如何用 CSS 的 Grid 佈局創作一枚小雞郵票
     
 
                    

效果預覽
按下右側的“點選預覽”按鈕可以在當前頁面預覽，點選連結可以全屏預覽。

可互動視訊
此視訊是可以互動的，你可以隨時暫停視訊，編輯視訊中的程式碼。
請用 chrome, safari, edge 開啟觀看。

原始碼下載
每日前端實戰系列的全部原始碼請從  

  
 

    

    
    
css網格佈局Grid
     
 
                  記錄一下grid佈局的應用，因為在日常工作中，運用element-ui的關係，導致grid佈局並不是運用特別多，本身這類ui就已經在實現上運用到了，但是還是需要知道如何使用。

	<div class="par-grid">
		<div class=" 

  
 

    

    
    
[轉載]CSS居中完全指南
     
 
							
							
							原載於CSS-Trick，本文著重提取文中的方法，不完全翻譯。如有需要，直接原文檢視。

人們經常抱怨在CSS中居中元素的問題，其實這個問題其實並不複雜，只是因為方法眾多，需要根據情況從眾多方法中選取一個出來。接下來，我們做一個‘決定樹’來幫我們把問題變的簡單一 

  
 

    

    
    
如何使用 Flexbox 和 CSS Grid，實現高效佈局
     
 
                    

                    

                    
                    
                    （點選上方公眾號，可快速關注）來源：葡萄城控制元件www.cnblogs.com/powerto 

  
 

    

    
    
純css瀑布流、Grid佈局
     
 
                1、純css瀑布流



2、Grid佈局



案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>實現瀑布流</ 

  
 

    

    
    
圖文詳解前端CSS中的Grid佈局，你真的可以5分鐘掌握
     
 
                
前言
網站的佈局是一個網站設計的根本，CSS的Grid佈局已經成為了未來網站佈局的基本方式。
今天這篇文章我們通過圖文，一起看看如何自己實現Grid佈局方式。

CSS
第一個Grid佈局
首先我們看看最基本的Grid佈局是什麼樣的，HTML頁面的程式碼如下所示。

HTM 

  
 

    

    
    
如何使用Flexbox和CSS Grid，實現高效佈局
     
 
								
								            
						
                CSS 浮動屬性一直是網站上排列元素的主要方法之一，但是當實現複雜佈局時，這種方法不總是那麼理想。幸運的是，在現代網頁設計時代，使用 Flexbox 和 CSS Grid 來對齊元素，變得相對容易起來。 

  
 

    

    
    
CSS Grid網格佈局全攻略
     
  
CSS Grid網格佈局全攻略


所有奇技淫巧都只在方寸之間。

幾乎從我們踏入前端開發這個領域開始，就不停地接觸不同的佈局技術。從常見的浮動到表格佈局，再到如今大行其道的flex佈局，css佈局技術一直在不斷地推陳出新。其中網格佈局(grid)作為css3的產物，它更加貼近網頁設 

  
 

    

    
    
88.CSS---Grid 網格佈局教程
     
 grid 相容性檢視請點此處 最新Grid相容
grid 佈局就是給父元素（容器）新增display:grid,然後使子元素（專案）改變佈局，
1 2 3 4 5 6 7 8 9
上面九個正方形的程式碼如下：沒有給正方形