CSS網格布局完整指南

簡介

CSS Grid布局（又名"網格"），是一個基于二維網格布局的系統，旨在改變我們基于網格設計的用戶界面方式。正如我們所知，CSS 總是用于布局我們的網頁，但它并沒有做的很好。剛開始的時候我們使用表格(table)，然后使用浮動(float)、定位(position)和內聯塊(inline-block)，但所有這些方法本質上來講都是hacks，并留下了很多需要實現的重要功能問題（例如垂直居中），雖然Flexbox可以起到一定的補救作用，但是旨在用于更簡單的一維布局，并不適用于復雜的二維布局(實際上 Flexbox 和 Grid 可以一起結合使用起到最佳效果)。網格（Grid）是第一個專門為解決布局問題而創建的CSS模塊，用來解決我們之前在制作網站時使用hacks處理布局問題。
這里有兩件事情啟發我創建本指南。第一個是 Rachel Andrew 的令人敬畏的書--為 CSS Grid 布局做好準備。這本書很詳盡明確的的介紹了Grid，是整篇文章的基礎。我強烈鼓勵你買它，讀它。另外一個很大的靈感來自于 Chris Coyier 的-- Flexbox完整指南，這本書是我了解Flebox的一個很優秀的資源。它幫助了很多人，這是事實，這里，我還想補充一句，當你使用谷歌搜索"flexbox"時，會出現很多類似的資源，但是為什么不直接利用最好的資源呢？
我書寫此指南的目的是基于目前最新規范的版本，規范其網格概念。所以我不會再次提及過時的 IE 語法，并且隨著規范的成熟，我會盡我們所能定期更新此指南。

基礎知識與瀏覽器支持

Grid 的入門是很容易的。你只需要定義一個容器元素并設置display：grid，使用grid-template-columns和 grid-template-rows屬性設置網格的列與行的大小，然后使用grid-column和 grid-row屬性將其子元素放入網格之中。與flexbox類似，網格項的源順序并不重要。你的CSS可以按任何順序放置，這使得你很容易重新布局網格與媒體查詢。想象一下你定義的整個頁面布局，然后如果想要完全重新布局以適應不同的屏幕寬度，這時僅僅使用幾行 CSS 代碼就可以實現。Grid是有史以來最強大 CSS 模塊之一。
關于 Grid 一件很重要的事情就是它現在還不適用于項目使用。目前還處于 W3C 的工作草案之中，并且默認情況下，還不被所有的瀏覽器正確支持。Internet Explorer 10 和 11 已經可以實現支持，但也是利用一種過時的語法實現的。現在出于示例演示，我建議你使用啟用了特殊標志的 Chrome, Opera 或者 Firefox 。在 Chrome，導航到chrome://flags并啟用" web 實驗平臺功能"。該方法同樣適用于 Opera (opera://flags)。在Firefox中，啟用 layout.css.grid.enabled標志。
這里有一張瀏覽器支持情況的表格(之后我會繼續更新):

CSS Grid Layout

除了Microsoft，瀏覽器廠商似乎想要等到Grid規范完全成熟后再加以推廣。這是一件好事，因為這意味著我們就不需要擔心學習多個語法。
這只是時間問題，你可以在生產環境中使用Grid。但是現在你需要開始學習它了。

重要術語

在深入研究網格的概念之前，我們需要理解其相關術語概念。因為這里所涉及的術語在概念上都有點類似，如果你不首先記住Grid規范定義，你就會很容易將其與其他概念相混淆。但是不需要擔心，這里的屬性并沒有很多。

網格容器（Grid Container）

當一個元素的屬性設置為display：grid時，它是所有網格項（Grid Items）的直接父元素。在下面示例中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）

網格容器的子節點(例如直接后代)。這里 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>

網格線（Gird Line）

分界線構成了網格的結構。它們可以是垂直的("列網格線")也可以是水平的("行網格線")，并且位于一行或一列的任一側。下面圖片中的黃線就是列網格線的示例。

列網格線

網格軌道（Grid Track）

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

網格軌道

網格單元格（Grid Cell）

兩個相鄰的行和兩個相鄰的列之間的網格線空間。它是網格的一個"單位"。下面圖片所示的是行網格線line 1
和line 2與列網格線line 2和 line 3之間的網格單元格。

網格軌道

網格區域（Grid Area）

網格區域為四條網格線所包圍的總空間。網格區域可以由任何數量的網格單元組成。下面圖片所示的是行網格線line 1，line3和列網格線line 1，line 3之間的網格區域。

網格區域

網格屬性目錄（Grid Properties Table of Contents）

網格容器屬性	網格項目屬性
display	grid-column-start
grid-template-columns	grid-column-end
grid-template-rows	grid-row-start
grid-template-areas	grid-row-end
grid-column-gap	grid-column
grid-row-gap	grid-row
grid-gap	grid-area
justify-items	justify-self
align-items	align-self
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

網格容器的屬性（Properties for the Grid Container）

display

將元素定義為網格容器，并為其內容建立新的網格格式上下文。
屬性值:
grid : 聲明一個塊級的網格
inline-grid : 聲明一個內聯級的網格
subgrid：如果你的網格容器本身是一個網格項（即嵌套網格），你可以使用此屬性來表示你希望其行/列的大小從其父項繼承，而不是自定義屬性。

.container{
   display: grid | inline-grid | subgrid;
}

注：column, float, clear, 和 vertical-align 元素對網格容器不起作用。

grid-template-columns 和 grid-template-rows

使用以空格分隔的值定義網格的列和行。這些值的大小表示軌道大小，它們之間的空間表示網格線。
屬性值:
<track-size> ：可以是一個長度、百分比或者是網格中自由空間的一小部分(使用fr單位)
<line-name> ：你選擇的任意名稱

.container{
    grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
    grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

示例：
當你在軌道值之間留有空格時，網絡線就會自動分配數值名稱:

.container{
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
}

grid-numbers

但是你也可以顯示命名，請參考括號語法中的行名稱命名方式:

.container{
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

grid-names

請注意，一條網格線可以具有有多個名稱。例如，這里的第二行將有兩個名字: row1-end和 row2-start:

.container{
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

如果你的定義中包含重復的部分，你可以使用 repeat()標識進行精簡:

.container{
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

等同于：

.container{
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

fr單位允許你將軌道的大小設置為網格容器的可用空間的一小部分。例如，如下所示把每個項目設置為網格容器寬度的三分之一：

.container{
  grid-template-columns: 1fr 1fr 1fr;
}

這里可用空間表示除去非彈性項后剩余的空間。在此示例中的fr單位的可用空間表示減去50px以后的空間大小:

.container{
  grid-template-columns: 1fr 50px 1fr 1fr;
}

grid-template-areas

通過使用grid-area屬性來定義網格區域名稱，從而定義網格模板。網格區域重復的名稱就會導致內容跨越這些單元格。句點表示一個空單元格。語法本身提供了一種可視化的網格結構。
屬性值:
<grid-area-name> -：使用grid-area屬性定義網格區域名稱
. ：句點表示一個空的單元格
none - 表示無網格區域被定義

.container{
  grid-template-areas: "<grid-area-name> | . | none | ..."
                       "..."
}

示例：

.item-a{
  grid-area: header;
}
.item-b{
  grid-area: main;
}
.item-c{
  grid-area: sidebar;
}
.item-d{
  grid-area: footer;
}
.container{
  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"
}

這將創建一個四列三行的網格。最上面的一行為header區域。中間一行由兩個main區域，一個空單元格和一個sidebar區域。最后一行是footer區域。

grid-template-areas

你所聲明的每一行都需要具有相同數目的單元格。
你可以使用任意數量的句點(.)聲明單個空單元格。只要句點之間沒有空格它們就表示一個空單元格。
注意，你只是使用此語法進行網格區域命名，而不是網格線命名。當你使用此語法時，區域兩邊的線就會得到自動命名。如果網格區域名稱為foo,則其行線和列線的名稱就將為foo-start，最后一行線及其最后一列線的名字就會為foo-end。這意味著一些線就可能具有多個名稱，如上面示例中所示，擁有三個名稱:header-start,main-start, 以及footer-start。

grid-column-gap 和 grid-row-gap

指定網格線的大小。你可以把它想像成在行/列之間設置間距寬度。
屬性值:
<line-size> : 一個長度值

.container{
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

示例：

.container{
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;   
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

grid-column-row-gap

間距僅僅在列/行之間產生，而不會在邊緣區。

grid-gap

grid-column-gap和grid-row-gap的簡寫值。
屬性值:
<grid-column-gap> 和<grid-row-gap> : 長度值

.container{
  grid-gap: <grid-column-gap> <grid-row-gap>;
}

示例：

.container{
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;   
  grid-gap: 10px 15px;
}

如果沒有指定grid-row-gap屬性的值，默認與grid-column-gap屬性值相同

justify-items

沿著列軸對齊網格項中的內容(相反于align-items屬性定義的沿行軸對齊)。此值適用于容器內所有的網格項。
屬性值:
start : 內容在網格區域中左端對齊
end ：內容在網格區域中右端對齊
center ：內容在網格區域居中對齊
stretch ：內容寬度占滿整個網格區域（默認值）

.container{
  justify-items: start | end | center | stretch;
}

示例：

.container{
  justify-items: start;
}

grid-justify-items-start

.container{
  justify-items: end;
}

grid-justify-items-end

.container{
  justify-items: center;
}

grid-justify-items-center

.container{
  justify-items: stretch;
}

grid-justify-items-stretch

以上特性也可以使用justify-self屬性對各個網格項進行設置。

align-items

沿行軸對齊網格項中的內容(相反于justify-items屬性定義的沿列軸對齊)。此值適用于容器內所有的網格項。
屬性值:
start : 內容在網格區域中頂端對齊
end ：內容在網格區域中底部對齊
center ：內容在網格區域居中對齊
stretch ：內容寬度占滿整個網格區域（默認值）

.container{
  align-items: start | end | center | stretch;
}

示例：

.container{
  align-items: start;
}

grid-align-items-start

.container{
  align-items: end;
}

grid-align-items-end

.container{
  align-items: center;
}

grid-align-items-center

.container{
  align-items: stretch;
}

grid-align-items-stretch

以上特性也可以使用align-self屬性對各個網格項進行設置。

justify-content

如果你的網格項目都是使用像px這樣的非響應式單位來計算的，就有可能出現一種情況－－網格的總大小可能小于其網格容器的大小。在這種情況下，您可以設置網格容器內的網格的對齊方式。此屬性沿著列軸對齊網格（相反于align-content屬性定義的沿行軸對齊）。
屬性值:
start -網格在網格容器中左端對齊
end - 網格在網格容器中右端對齊
center - 網格在網格容器中居中對齊
stretch - 調整網格項的大小，使其寬度填充整個網格容器
space-around -在網格項之間設置偶數個空格間隙，其最邊緣間隙大小為中間空格間隙大小的一半
space-between - 在網格項之間設置偶數個空格間隙，其最邊緣沒有間隙
space-evenly - 在網格項之間設置偶數個空格間隙，其最邊緣間隙與其相同

.container{
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

.container{
  justify-content: start;   
}

grid-justify-content-start

.container{
  justify-content: end; 
}

![Uploading grid-justify-content-center]
](http://upload-images.jianshu.io/upload_images/1673685-51053776bcc7111a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

.container{
  justify-content: center;  
}

grid-justify-content-center

.container{
  justify-content: stretch; 
}

grid-justify-content-stretch

.container{
  justify-content: space-around;    
}

grid-justify-content-space-around

.container{
  justify-content: space-between;   
}

grid-justify-content-space-between

.container{
  justify-content: space-evenly;    
}

grid-justify-content-space-evenly

align-content

如果你的網格項目都是使用像px這樣的非響應式單位來計算的，就有可能出現一種情況－－網格的總大小可能小于其網格容器的大小。在這種情況下，您可以設置網格容器內的網格的對齊方式。此屬性沿著行軸對齊網格（相反于justify-content屬性定義的沿列軸對齊）。
屬性值:
start -網格在網格容器中頂端對齊
end - 網格在網格容器中底端對齊
center - 網格在網格容器中居中對齊
stretch - 調整網格項的大小，使其寬度填充整個網格容器
space-around -在網格項之間設置偶數個空格間隙，其最邊緣間隙大小為中間空格間隙大小的一半
space-between - 在網格項之間設置偶數個空格間隙，其最邊緣沒有間隙
space-evenly - 在網格項之間設置偶數個空格間隙，其最邊緣間隙與其相同

.container{
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

示例：

.container{
  align-content: start; 
}

grid-align-content-start

.container{
  align-content: end;   
}

grid-align-content-end

.container{
  align-content: center;    
}

grid-align-content-center

.container{
  align-content: stretch;   
}

grid-align-content-stretch

.container{
  align-content: space-around;  
}

grid-align-content-space-around

.container{
  align-content: space-between; 
}

grid-align-content-space-between

.container{
  align-content: space-evenly;  
}

grid-align-content-space-evenly

grid-auto-columns和 grid-auto-rows

指定任何自動生成的網格軌道（也稱為隱式網格軌道）的大小。當顯式定位超出定義網格范圍的行或列（通過grid-template-rows / grid-template-columns）時，將創建隱式網格軌道。
屬性值：
<track-size> ：可以是一個長度、百分比或者是網格中自由空間的一小部分(使用fr單位)

.container{
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

為了說明隱式網格軌道是如何創建的，請思考一下：

.container{
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}

grid-auto

這里創建了2x2的網格。
但現在試想一下你使用grid-column和grid-row來定位你的網格項如下：

.item-a{
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b{
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

implicit-tracks

我們告訴.item-b在第列線 5開始，在列線6結束，但是我們從未定義過列線 5或6。因為我們引用了不存在的列，所以創建寬度為0的隱式軌道來填充這個間隙。我們可以使用grid-auto-columns和grid-auto-rows來指定這些隱式軌道的寬度：

.container{
  grid-auto-columns: 60px;
}

implicit-tracks-with-widths

grid-auto-flow

如果您有未明確放置在網格上的網格項，則自動布局算法會啟動，以自動放置項。此屬性用來控制自動布局算法的工作原理。
屬性值:
row : 告訴自動布局算法依次填充每一行，并根據需要添加新行
column ：告訴自動布局算法依次填充每一列，并根據需要添加新列
dense ：告訴自動布局算法嘗試在網格更早的時候填充接下來出現較小的項目留有的空白

.container{
  grid-auto-flow: row | column | row dense | column dense
}

請注意，dense可能會導致您的項目無序顯示。
示例：
思考下面的HTML：

<section class="container">
    <div class="item-a">item-a</div>
    <div class="item-b">item-b</div>
    <div class="item-c">item-c</div>
    <div class="item-d">item-d</div>
    <div class="item-e">item-e</div>
</section>

這里定義了一個兩列五行的網格，并將 grid-auto-flow屬性設置為row(即默認值):

.container{
    display: grid;
    grid-template-columns: 60px 60px 60px 60px 60px;
    grid-template-rows: 30px 30px;
    grid-auto-flow: row;
}

當在網格上放置項目時，您只需要指定其中兩個的網格項

.item-a{
    grid-column: 1;
    grid-row: 1 / 3;
}
.item-e{
    grid-column: 5;
    grid-row: 1 / 3;

因為我們將grid-auto-flow屬性設置為了row，所以我們的網格看起來會像這個樣子。注意我們沒有進行設置的三個網格項(item-b, item-c and item-d),會沿行軸進行布局。

grid-auto-flow-row

如果我們將grid-auto-flow屬性設置為 column,item-b, item-c 和 item-d 就會沿列軸進行布局。

.container{
    display: grid;
    grid-template-columns: 60px 60px 60px 60px 60px;
    grid-template-rows: 30px 30px;
    grid-auto-flow: column;
}

grid-auto-flow-column

grid

在一行聲明中設置一下所有屬性的簡寫形式:grid-template-rows, grid-template-column, grid-template-areas, grid-auto-rows,grid-auto-columns, 以及 grid-auto-flow。它將grid-column-gap 和 grid-row-gap
屬性設置為初始值，即使它們不能由此屬性顯式去設置。
屬性值:
none: 將所有的子屬性設置為初始值
subgrid: 將grid-template-rows和grid-template-columns屬性值設置為subgrid其余子屬性設置為初始值
<grid-template-rows> / <grid-template-columns>: 將grid-template-rows和 grid-template-columns
分別設置為指定值，其余子屬性設置為初始值
<grid-auto-flow>[<grid-auto-rows> [ / <grid-auto-columns>] ] : grid-auto-flow, grid-auto-rows和 grid-auto-columns屬性分別接受相同的值,如果省略了grid-auto-columns屬性，它將設置為grid-auto-rows屬性的值。如果兩者均被忽略，那么都將被設置為初始值。

.container{
    grid: none | subgrid | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
}

示例：
以下兩個代碼塊是等效的：

.container{
    grid: 200px auto / 1fr auto 1fr;
}

.container{
    grid-template-rows: 200px auto;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: none;
}

以下兩個代碼塊同樣也是等效的：

.container{
    grid: column 1fr / auto;
}

.container{
    grid-auto-flow: column;
    grid-auto-rows: 1fr;
    grid-auto-columns: auto;        
}

它還接受一次性設置所有屬性，更復雜但相當方便的語法。指定 grid-template-areas
, grid-auto-rows 和 grid-auto-columns屬性，其他所有子屬性都將設置為其初始值。你現在所做的是在其網格區域內，指定網格線名稱和內聯軌道大小。這里最容易用一個例子來描述：

.container{
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

等同于：

.container{  
  grid-template-areas: "header header header"
                       "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto; 
}

網格項的屬性（Properties for the Grid Items）

grid-column-start
grid-column-end
grid-row-start
grid-row-end
通過使用特定的網格線確定網格項在網格內的位置。grid-column-start/grid-row-start屬性表示網格項的網格線的起始位置，grid-column-end/grid-row-end屬性表示網格項的網格線的終止位置。
屬性值:
**<line>
**: 可以是一個數字來指代相應編號的網格線，或者使用名稱指代相應命名的網格線
span <number>: 網格項包含指定數量的網格軌道
span <name>: 網格項包含指定名稱網格項的網格線之前的網格軌道
auto: 表明自動定位，自動跨度或者默認跨度為一

.item{
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

示例：

.item-a{
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}

grid-start-end-a

.item-b{
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}

grid-start-end-b

如果沒有聲明grid-column-end/grid-row-end屬性，默認情況下網格項的跨度為1。
網格項可以互相重疊。可以使用z-index屬性控制堆疊順序。
grid-column
grid-row
grid-column-start+grid-column-end, 和grid-row-start+grid-row-end屬性分別的簡寫形式。
屬性值:
<start-line> / <end-line>：每一個屬性均接收自定義的一個相同值，包括跨度。

.item{
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

示例：

grid-start-end-c.png

.item-c{
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

如果沒有聲明結束網格線值，默認網格軌道跨度為1.
grid-area
屬性值:
<name> - 你定義的名字
<row-start> / <column-start> / <row-end> / <column-end> - 可以是數字或者命名行
示例：
為網格項命名的一種方式：

.item-d{
  grid-area: header
}

grid-row-start + grid-column-start+ grid-row-end+ grid-column-end屬性的一種簡寫方式:

.item-d{
  grid-area: 1 / col4-start / last-line / 6
}

grid-start-end-d

justify-self
沿列軸對齊網格項中的內容(相反于align-item屬性定義的沿行軸對齊)。此值適用于單一網格項中的內容。
屬性值:
start: 內容與網格區域的左端對齊
end: 內容與網格區域的右端對齊
center: 內容處于網格區域的中間位置
stretch: 內容寬度占據整個網格區域空間(默認值)

.item{ justify-self: start | end | center | stretch;}

示例

.item-a{
  justify-self: start;
}
![grid-justify-self-start](http://upload-images.jianshu.io/upload_images/1673685-7852d1a5d23c8293.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

.item-a{
  justify-self: end;
}

grid-justify-self-end

.item-a{
  justify-self: center;
}

grid-justify-self-center

.item-a{
  justify-self: stretch;
}

grid-justify-self-stretch

設置網格中所有網格項的對齊方式，可以使用網格容器上的justify-items屬性。

align-self
沿行軸對齊網格項中的內容(相反于justify-item屬性定義的沿列軸對齊)。此值適用于單一網格項中的內容。
屬性值:
start: 內容與網格區域的頂端對齊
end: 內容與網格區域的底部對齊
center: 內容處于網格區域的中間位置
stretch: 內容高度占據整個網格區域空間(默認值)

.item{
  align-self: start | end | center | stretch;
}

示例：

.item-a{
  align-self: start;
}

grid-align-self-start

.item-a{
  align-self: end;
}

grid-align-self-end

.item-a{
  align-self: center;
}

grid-align-self-center

.item-a{
  align-self: stretch;
}

grid-align-self-stretch

本文翻譯自 http://chris.house/blog/a-complete-guide-css-grid-layout/#prop-grid-template-areas
轉載請注明英文原版出處

最后編輯于：2017.12.04 08:23:26

?著作權歸作者所有,轉載或內容合作請聯系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 227,572評論 6贊 531
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 98,071評論 3贊 414
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 175,409評論 0贊 373
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 62,569評論 1贊 307
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,360評論 6贊 404
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 54,895評論 1贊 321
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 42,979評論 3贊 440
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,123評論 0贊 286
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 48,643評論 1贊 333
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 40,559評論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 42,742評論 1贊 369
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,250評論 5贊 356
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 43,981評論 3贊 346
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,363評論 0贊 25
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,622評論 1贊 280
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,354評論 3贊 390
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 47,707評論 2贊 370

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

CSS網格布局完整指南

CSS網格布局完整指南

簡介

基礎知識與瀏覽器支持

重要術語

網格容器（Grid Container）

網格項（Grid Item）

網格線（Gird Line）

網格軌道（Grid Track）

網格單元格（Grid Cell）

網格區域（Grid Area）

網格屬性目錄（Grid Properties Table of Contents）

網格容器的屬性（Properties for the Grid Container）

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

網格項的屬性（Properties for the Grid Items）

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

CSS網格布局完整指南

簡介

基礎知識與瀏覽器支持

重要術語

網格容器（Grid Container）

網格項（Grid Item）

網格線（Gird Line）

網格軌道（Grid Track）

網格單元格（Grid Cell）

網格區域（Grid Area）

網格屬性目錄（Grid Properties Table of Contents）

網格容器的屬性（Properties for the Grid Container）

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

網格項的屬性（Properties for the Grid Items）

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频