grid布局
CSS grid布局是CSS中最強大的布局。它可以同時處理列和行。
.container {
display: grid;
width: 400px;
height: 400px;
background: rgba(66, 41, 11, 0.239);
}
.item {
line-height: 3;
text-align: center;
color: rgb(255, 255, 255);
border-radius: 10px;
}
.item-1 {
background-color: rgb(161, 126, 29);
}
.item-2 {
background-color: rgb(120, 19, 138);
}
.item-3 {
background-color: rgb(35, 26, 122);
}
.item-4 {
background-color: rgb(122, 26, 26);
}
.item-5 {
background-color: rgb(52, 124, 30);
}
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
</div>
首先，你必須使用 display: grid 将容器元素定義為一個 grid(網格) 布局，使用 grid-template-columns 和 grid-template-rows 設定 列 和 行 的尺寸大小，然後通過 grid-column 和 grid-row 将其子元素放入這個 grid(網格) 中。與 flexbox 類似，網格項（grid items）的源(HTML結構)順序無關緊要。你的 CSS 可以以任何順序放置它們，這使得使用 媒體查詢（media queries）重新排列網格變得非常容易。
名詞解析
網格容器
應用display:grid的元素。
網格項
網格容器的直接子元素，非直接子元素的節點都不是網格項。
網格線
構成網格結構的分界線
網格軌道
兩條相鄰網格線之間的空間。你可以把它們想象成網格的列或行。下圖是第二條和第三條 行網格線 之間的 網格軌道。
網格單元格
兩個相鄰的行和兩個相鄰的列網格線之間的空間。這是 Grid(網格) 系統的一個“單元”。
網格區域
4條網格線包圍的總空間。一個 網格區域(Grid Area) 可以由任意數量的 網格單元格(Grid Cell) 組成。
網格容器屬性
網格容器屬性
☆ display
☆ grid-template-columns
☆ grid-template-rows
☆ grid-template-areas
☆ grid-template
☆ grid-column-gap
☆ grid-row-gap
☆ grid-gap
☆ justify-items
☆ align-items
☆ place-items
☆ justify-content
☆ align-content
☆ place-content
☆ grid-auto-columns
☆ grid-auto-rows
☆ grid-auto-flow
☆ grid
網格項(Grid Items) 屬性
☆ grid-column-start
☆ grid-column-end
☆ grid-row-start
☆ grid-row-end
☆ grid-column
☆ grid-row
☆ grid-area
☆ justify-self
☆ align-self
☆ place-self
設定為網格容器
display:
grid/inline-gird
與彈性布局容器的display:flex/inline-flex一緻，設定主容器為塊元素或者行内元素。
grid-template-columns/grid-template-rows
使用空格分隔的值清單，用來定義網格的列和行。這些值表示 網格軌道(Grid Track) 大小，它們之間的空格表示網格線。
值：
☆ ： 可以是長度值，百分比，或者等份網格容器中可用空間（使用 fr 機關）
☆ ：你可以選擇的任意名稱
CSS 代碼:
.container{
grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}
示例：
當你在 網格軌道(Grid Track) 值之間留出空格時，網格線會自動配置設定正數和負數名稱：
CSS 代碼:
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
但是你可以明确的指定網格線(Grid Line)名稱，例如 值。請注意網格線名稱的括号文法：
CSS 代碼:
.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 Line)可以有多個名稱。例如，這裡的第二條 行網格線(row grid lines) 将有兩個名字：row1-end 和 row2-start ：
CSS 代碼:
.container {
grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}
如果你的定義包含多個重複值，則可以使用 repeat() 表示法來簡化定義：
CSS 代碼:
.container {
grid-template-columns: repeat(3, 20px [col-start]);
}
上面的代碼等價于：
CSS 代碼:
.container {
grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}
如果多行共享相同的名稱，則可以通過其網格線名稱和計數來引用它們。
CSS 代碼:
.item {
grid-column-start: col-start 2;
}
fr 單元允許你用等分網格容器剩餘可用空間來設定 網格軌道(Grid Track) 的大小 。例如，下面的代碼會将每個網格項設定為網格容器寬度的三分之一：
CSS 代碼:
.container {
grid-template-columns: 1fr 1fr 1fr;
}
剩餘可用空間是除去所有非靈活網格項 之後 計算得到的。在這個例子中，可用空間總量減去 50px 後，再給 fr 單元的值 3 等分：
CSS 代碼:
.container {
grid-template-columns: 1fr 50px 1fr 1fr;
}
grid-template-areas
通過引用 grid-area 屬性指定的 網格區域(Grid Area) 名稱來定義網格模闆。重複網格區域的名稱導緻内容跨越這些單元格。一個點号（.）代表一個空單元格。這個文法本身可視作網格的可視化結構。
值：
☆ ：由網格項的 grid-area 指定的網格區域名稱
☆ .（點号） ：代表一個空的網格單元
☆ none：不定義網格區域
CSS 代碼:
.container {
grid-template-areas:
"<grid-area-name> | . | none | ..."
"...";
}
示例：
CSS 代碼:
.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";
}
上面的代碼将建立一個 4 列寬 3 行高的網格。整個頂行将由 header 區域組成。中間一排将由兩個 main 區域，一個是空單元格，一個 sidebar 區域組成。最後一行全是 footer 區域組成。
你的聲明中的每一行都需要有相同數量的單元格。
你可以使用任意數量的相鄰的 點. 來聲明單個空單元格。 隻要這些點.之間沒有空隙隔開，他們就代表一個單獨的單元格。
注意你 不能 用這個文法來命名網格線，隻是命名 網格區域 。當你使用這種文法時，區域兩端的網格線實際上會自動命名。如果你的網格區域的名字是 foo，該區域的起始行網格線 和 起始列網格線 的名稱将為 foo-start，而最後一條行網格線 和 最後一條列網格線 的名稱将為 foo-end。這意味着某些網格線可能有多個名字，如上例中最左邊的網格線，它将有三個名稱：header-start，main-start 和 footer-start 。
grid-template
用于定義 ：grid-template-rows ，grid-template-columns ，grid-template-areas 簡寫屬性。
值：
☆ none：将所有三個屬性設定為其初始值
☆ / ：将 grid-template-columns 和 grid-template-rows 設定為相應地特定的值，并且設定grid-template-areas為none
CSS 代碼:
.container {
grid-template: none | <grid-template-rows> / <grid-template-columns>;
}
這個屬性也接受一個更複雜但非常友善的文法來指定三個上訴屬性。這裡有一個例子：
CSS 代碼:
.container {
grid-template:
[row1-start] "header header header" 25px [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}
等價于：
CSS 代碼:
.container {
grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
grid-template-areas:
"header header header"
"footer footer footer";
}
由于 grid-template 不會重置 隐式 網格屬性（grid-auto-columns， grid-auto-rows， 和 grid-auto-flow），
這可能是你想在大多數情況下做的，建議使用 grid 屬性而不是 grid-template。
grid-column-gap / grid-row-gap
指定網格線(grid lines)的大小。你可以把它想象為設定列/行之間間距的寬度。
值：
☆ ：長度值
CSS 代碼:
.container {
grid-column-gap: <line-size>;
grid-row-gap: <line-size>;
}
示例：
CSS 代碼:
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-column-gap: 10px;
grid-row-gap: 15px;
}
隻能在 列/行 之間建立間距，網格外部邊緣不會有這個間距。
注意：這兩個屬性将删除 grid- 字首，就是将 grid-column-gap 和 grid-row-gap重命名為 column-gap 和 row-gap。 Chrome 68+，Safari 11.2 Release 50+ 和Opera 54+ 已經支援無字首的屬性。
grid-gap
grid-column-gap 和 grid-row-gap 的簡寫文法
值：
☆ ：長度值
CSS 代碼:
.container {
grid-gap: <grid-row-gap> <grid-column-gap>;
}
示例：
CSS 代碼:
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-gap: 15px 10px;
}
如果grid-row-gap沒有定義，那麼就會被設定為等同于 grid-column-gap 的值。例如下面的代碼是等價的：
CSS 代碼:
container{
/* 設定 grid-column-gap 和 grid-row-gap */
grid-column-gap: 10px;
grid-row-gap: 10px;
/* 等價于 */
grid-gap: 10px 10px;
/* 等價于 */
grid-gap: 10px;
}
注意：這個屬性将删除 grid- 字首，就是将 grid-gap 重命名為 gap。 Chrome 68+，Safari 11.2 Release 50+ 和Opera 54+ 已經支援無字首的屬性。
justify-items
沿着 inline（行）軸線對齊網格項(grid items)（相反的屬性是 align-items 沿着 block（列）軸線對齊）。此值适用于容器内的所有網格項。
值：
☆ start：将網格項對齊到其單元格的左側起始邊緣（左側對齊）
☆ end：将網格項對齊到其單元格的右側結束邊緣（右側對齊）
☆ center：将網格項對齊到其單元格的水準中間位置（水準居中對齊）
☆ stretch：填滿單元格的寬度（預設值）
CSS 代碼:
.container {
justify-items: start | end | center | stretch;
}
示例：
CSS 代碼:
.container {
justify-items: start;
}
CSS 代碼:
.container{
justify-items: end;
}
CSS 代碼:
.container{
justify-items: center;
}
CSS 代碼:
.container{
justify-items: stretch;
}
這些行為也可以通過每個單獨網格項(grid items) 的 justify-self 屬性設定。
align-items
沿着 block（列）軸線對齊網格項(grid items)（相反的屬性是 justify-items 沿着 inline（行）軸線對齊）。此值适用于容器内的所有網格項。
值：
☆ start：将網格項對齊到其單元格的頂部起始邊緣（頂部對齊）
☆ end：将網格項對齊到其單元格的底部結束邊緣（底部對齊）
☆ center：将網格項對齊到其單元格的垂直中間位置（垂直居中對齊）
☆ stretch：填滿單元格的高度（預設值）
CSS 代碼:
.container {
align-items: start | end | center | stretch;
}
示例：
CSS 代碼:
.container {
align-items: start;
}
CSS 代碼:
.container {
align-items: end;
}
CSS 代碼:
.container {
align-items: center;
}
CSS 代碼:
.container {
align-items: stretch;
}
這些行為也可以通過每個單獨網格項(grid items) 的 align-self 屬性設定。
place-items
place-items 是設定 align-items 和 justify-items 的簡寫形式。
值：
☆ ：第一個值設定 align-items 屬性，第二個值設定 justify-items 屬性。如果省略第二個值，則将第一個值同時配置設定給這兩個屬性。
除 Edge 之外的所有主要浏覽器都支援 place-items 簡寫屬性。
有關更多詳細資訊，請參閱align-items 和 justify-items。
justify-content
有時，你的網格合計大小可能小于其 網格容器(grid container) 大小。 如果你的所有 網格項(grid items) 都使用像 px 這樣的非靈活機關設定大小，就可能出現這種情況。在這種情況下，您可以設定網格容器内的網格的對齊方式。 此屬性沿着 inline（行）軸線對齊網格（相反的屬性是 align-content ，沿着 block（列）軸線對齊網格）。
值：
☆ start：将網格對齊到 網格容器(grid container) 的左側起始邊緣（左側對齊）
☆ end：将網格對齊到 網格容器 的右側結束邊緣（右側對齊）
☆ center：将網格對齊到 網格容器 的水準中間位置（水準居中對齊）
☆ stretch：調整 網格項(grid items) 的寬度，允許該網格填充滿整個 網格容器 的 寬度
☆ space-around：在每個網格項之間放置一個均勻的空間，左右兩端放置一半的空間
☆ space-between：在每個網格項之間放置一個均勻的空間，左右兩端沒有空間
☆ space-evenly：在每個網格項目之間放置一個均勻的空間，左右兩端放置一個均勻的空間
CSS 代碼:
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
示例：
CSS 代碼:
.container {
justify-content: start;
}
CSS 代碼:
.container {
justify-content: end;
}
CSS 代碼:
.container {
justify-content: center;
}
CSS 代碼:
.container {
justify-content: stretch;
}
CSS 代碼:
.container {
justify-content: space-around;
}
CSS 代碼:
.container {
justify-content: space-between;
}
CSS 代碼:
.container {
justify-content: space-evenly;
}
align-content
有時，你的網格合計大小可能小于其 網格容器(grid container) 大小。 如果你的所有 網格項(grid items) 都使用像 px 這樣的非靈活機關設定大小，就可能出現這種情況。在這種情況下，您可以設定網格容器内的網格的對齊方式。 此屬性沿着 block（列）軸線對齊網格（相反的屬性是 justify-content ，沿着 inline（行）軸線對齊網格）。
值：
☆ start：将網格對齊到 網格容器(grid container) 的頂部起始邊緣（頂部對齊）
☆ end：将網格對齊到 網格容器 的底部結束邊緣（底部對齊）
☆ center：将網格對齊到 網格容器 的垂直中間位置（垂直居中對齊）
☆ stretch：調整 網格項(grid items) 的高度，允許該網格填充滿整個 網格容器 的高度
☆ space-around：在每個網格項之間放置一個均勻的空間，上下兩端放置一半的空間
☆ space-between：在每個網格項之間放置一個均勻的空間，上下兩端沒有空間
☆ space-evenly：在每個網格項目之間放置一個均勻的空間，上下兩端放置一個均勻的空間
CSS 代碼:
.container {
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
示例：
CSS 代碼:
.container {
align-content: start;
}
CSS 代碼:
.container {
align-content: end;
}
CSS 代碼:
.container {
align-content: center;
}
CSS 代碼:
.container {
align-content: stretch;
}
CSS 代碼:
.container {
align-content: space-around;
}
CSS 代碼:
.container {
align-content: space-between;
}
CSS 代碼:
.container {
align-content: space-evenly;
}
place-content
place-content 是設定 align-content 和 justify-content 的簡寫形式。
值：
☆ ：第一個值設定 align-content 屬性，第二個值設定 justify-content 屬性。如果省略第二個值，則将第一個值同時配置設定給這兩個屬性。
除 Edge 之外的所有主要浏覽器都支援 place-content 簡寫屬性。
有關更多詳細資訊，請參閱align-content 和 justify-content。
grid-auto-columns / grid-auto-rows
指定任何自動生成的網格軌道(grid tracks)（又名隐式網格軌道）的大小。當網格中的網格項多于單元格時，或者當網格項位于顯式網格之外時，就會建立隐式軌道。（參見顯式網格和隐式網格之間的差別）
值：
☆ ：可以是長度值，百分比，或者等份網格容器中可用空間的分數（使用 fr 機關）
CSS 代碼:
.container {
grid-auto-columns: <track-size> ...;
grid-auto-rows: <track-size> ...;
}
為了說明如何建立隐式網格軌道，請考慮一下以下的代碼：
CSS 代碼:
.container {
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px
}
這将生成了一個 2×2 的網格。
但現在想象一下，你使用 grid-column 和 grid-row 來定位你的網格項，像這樣：
CSS 代碼:
.item-a {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item-b {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
我們告訴 .item-b 從第 5 條列網格線開始到第 6 條列網格線結束，但我們從來沒有定義過 第5 或 第6 列網格線。
因為我們引用的網格線不存在，是以建立寬度為 0 的隐式網格軌道以填補空缺。我們可以使用 grid-auto-columns 和 grid-auto-rows 來指定這些隐式軌道的大小：
CSS 代碼:
.container {
grid-auto-columns: 60px;
}
grid-auto-flow
如果你有一些沒有明确放置在網格上的網格項(grid items)，自動放置算法 會自動放置這些網格項。該屬性控制自動布局算法如何工作。
值：
☆ row：告訴自動布局算法依次填充每行，根據需要添加新行 （預設）
☆ column：告訴自動布局算法依次填入每列，根據需要添加新列
☆ dense：告訴自動布局算法在稍後出現較小的網格項時，嘗試填充網格中較早的空缺
CSS 代碼:
.container {
grid-auto-flow: row | column | row dense | column dense
}
請注意，dense 隻會更改網格項的可視順序，并可能導緻它們出現亂序，這對可通路性不利。
示例：
考慮以下 HTML :
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>
你定義一個有 5 列和 2 行的網格，并将 grid-auto-flow 設定為 row（也就是預設值）：
CSS 代碼:
.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: row;
}
将網格項放在網格上時，隻能為其中的兩個指定位置：
CSS 代碼:
.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，item-d）會這樣排列在可用的行中：
相反地，如果我們把 grid-auto-flow 設成了 column ，那麼 item-b，item-c，item-d 會沿着列向下排列：
CSS 代碼:
.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: column;
}
grid
在一個聲明中設定所有以下屬性的簡寫： grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow 。（注意：您隻能在單個網格聲明中指定顯式或隐式網格屬性）。
值：
☆ none：将所有子屬性設定為其初始值。
☆ ：與grid-template 簡寫的工作方式相同。
☆ / [ auto-flow && dense? ] ? ：将grid-template-rows 設定為指定的值。 如果 auto-flow 關鍵字位于斜杠的右側，則會将 grid-auto-flow 設定為 column。 如果另外指定了 dense 關鍵字，則自動放置算法使用 “dense” 算法。 如果省略 grid-auto-columns ，則将其設定為 auto。
☆ [ auto-flow && dense? ] ? / ：将 grid-template-columns 設定為指定值。 如果 auto-flow 關鍵字位于斜杠的左側，則會将grid-auto-flow 設定為 row 。 如果另外指定了 dense 關鍵字，則自動放置算法使用 “dense” 打包算法。 如果省略 grid-auto-rows ，則将其設定為 auto。
例子：
以下兩個代碼塊是等效的：
CSS 代碼:
.container {
grid: 100px 300px / 3fr 1fr;
}
CSS 代碼:
.container {
grid-template-rows: 100px 300px;
grid-template-columns: 3fr 1fr;
}
以下兩個代碼塊是等效的：
CSS 代碼:
.container {
grid: auto-flow / 200px 1fr;
}
CSS 代碼:
.container {
grid-auto-flow: row;
grid-template-columns: 200px 1fr;
}
以下兩個代碼塊是等效的：
CSS 代碼:
.container {
grid: auto-flow dense 100px / 1fr 2fr;
}
CSS 代碼:
.container {
grid-auto-flow: row dense;
grid-auto-rows: 100px;
grid-template-columns: 1fr 2fr;
}
以下兩個代碼塊是等效的：
CSS 代碼:
.container {
grid: 100px 300px / auto-flow 200px;
}
CSS 代碼:
.container {
grid-template-rows: 100px 300px;
grid-auto-flow: column;
grid-auto-columns: 200px;
}
它也接受一個更複雜但相當友善的文法來一次設定所有内容。您可以指定 grid-template-areas，grid-template-rows和grid-template-columns，并所有其他的子屬性都被設定為它們的初始值。這麼做可以在它們網格區域内相應地指定網格線名字和網格軌道的大小。用最簡單的例子來描述：
CSS 代碼:
.container {
grid: [row1-start] "header header header" 1fr [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}
等價于：
CSS 代碼:
.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;
}
子元素 網格項(Grid Items) 屬性
注意：float，display: inline-block，display: table-cell，vertical-align 和 column-* 屬性對網格項無效。
grid-column-start / grid-column-end / grid-row-start / grid-row-end
通過引用特定網格線(grid lines) 來确定 網格項(grid item) 在網格内的位置。 grid-column-start / grid-row-start 是網格項開始的網格線，grid-column-end / grid-row-end 是網格項結束的網格線。
值：
☆ ：可以是一個數字引用一個編号的網格線，或者一個名字來引用一個命名的網格線
☆ span ：該網格項将跨越所提供的網格軌道數量
☆ span ：該網格項将跨越到它與提供的名稱位置
☆ auto：表示自動放置，自動跨度，預設會擴充一個網格軌道的寬度或者高度
CSS 代碼:
.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
}
示例：
CSS 代碼:
.item-a {
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start
grid-row-end: 3;
}
CSS 代碼:
.item-b {
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2
grid-row-end: span 2
}
如果沒有聲明指定 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 的簡寫形式。
值：
☆ / ：每個網格項都接受所有相同的值，作為普通書寫的版本，包括跨度
CSS 代碼:
.item {
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}
示例：
CSS 代碼:
.item-c {
grid-column: 3 / span 2;
grid-row: third-line / 4;
}
如果沒有聲明分隔線結束位置，則該網格項預設占據 1 個網格軌道。
grid-area
為網格項提供一個名稱，以便可以 被使用網格容器 grid-template-areas 屬性建立的模闆進行引用。 另外，這個屬性可以用作grid-row-start + grid-column-start + grid-row-end + grid-column-end 的簡寫。
值：
☆ ：你所選的名稱
☆ / / / ：數字或分隔線名稱
CSS 代碼:
.item {
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}
示例：
作為為網格項配置設定名稱的一種方法：
CSS 代碼:
.item-d {
grid-area: header
}
作為grid-row-start + grid-column-start + grid-row-end + grid-column-end 屬性的簡寫形式
CSS 代碼:
.item-d {
grid-area: 1 / col4-start / last-line / 6
}
justify-self
沿着 inline（行）軸線對齊網格項（ 相反的屬性是 align-self ，沿着 block（列）軸線對齊）。此值适用于單個網格項内的内容。
值：
☆ start：将網格項對齊到其單元格的左側起始邊緣（左側對齊）
☆ end：将網格項對齊到其單元格的右側結束邊緣（右側對齊）
☆ center：将網格項對齊到其單元格的水準中間位置（水準居中對齊）
☆ stretch：填滿單元格的寬度（預設值）
CSS 代碼:
.item {
justify-self: start | end | center | stretch;
}
示例：
CSS 代碼:
.item-a {
justify-self: start;
}
CSS 代碼:
.item-a {
justify-self: end;
}
CSS 代碼:
.item-a {
justify-self: center;
}
CSS 代碼:
.item-a {
justify-self: stretch;
}
要為網格中的所有網格項設定 行軸線(row axis) 線上對齊方式，也可以在 網格容器 上設定 justify-items 屬性。
align-self
沿着 block（列）軸線對齊網格項(grid items)（ 相反的屬性是 justify-self ，沿着 inline（行）軸線對齊）。此值适用于單個網格項内的内容。
值：
☆ start：将網格項對齊到其單元格的頂部起始邊緣（頂部對齊）
☆ end：将網格項對齊到其單元格的底部結束邊緣（底部對齊）
☆ center：将網格項對齊到其單元格的垂直中間位置（垂直居中對齊）
☆ stretch：填滿單元格的高度（預設值）
CSS 代碼:
.item{
align-self: start | end | center | stretch;
}
示例：
CSS 代碼:
.item-a {
align-self: start;
}
CSS 代碼:
.item-a {
align-self: end;
}
CSS 代碼:
.item-a {
align-self: center;
}
CSS 代碼:
.item-a {
align-self: stretch;
}
要為網格中的所有網格項設定 列軸線(column axis) 上的對齊方式，也可以在 網格容器 上設定 align-items 屬性。
place-self
place-self 是設定 align-self 和 justify-self 的簡寫形式。
值：
☆ auto – 布局模式的 “預設” 對齊方式。
☆ ：第一個值設定 align-self 屬性，第二個值設定 justify-self 屬性。如果省略第二個值，則将第一個值同時配置設定給這兩個屬性。
示例：
CSS 代碼:
.item-a {
place-self: center;
}
CSS 代碼:
.item-a {
place-self: center stretch;
}
除 Edge 之外的所有主要浏覽器都支援 place-self 簡寫屬性。
動畫（Animation）
根據 CSS Grid 布局子產品 Level 1 規範，有 5 個可應用動畫的網格屬性：
☆ grid-gap， grid-row-gap，grid-column-gap 作為長度，百分比或 calc。
☆ grid-template-columns，grid-template-rows 作為長度，百分比或 calc 的簡單清單，隻要清單中長度、百分比或calc元件的值不同即可。
轉載位址：https://www.html.cn/archives/8510/#prop-grid-template-areas
原網址：https://css-tricks.com/snippets/css/complete-guide-grid/