Grid 排列網格項目

網格格線規劃完成後，下一步就是按照格線規劃，將網格項目排列在指定的位置，這篇教學會介紹 grid-row-start、grid-row-end、grid-column-start、grid-column-end、grid-area 等排列網格項目的樣式屬性，透過這些針對「網格項目」的樣式屬性，精準排列網格項目。

延伸閱讀：Grid 網格容器與格線、Grid 網格空間與命名、Grid 網格流向與間距

快速導覽：

grid-row-start、grid-row-end、grid-column-start、grid-column-end

使用格線編號

使用格線名稱

使用網格名稱

grid-row、grid-column 樣式屬性縮寫

grid-area 使用網格空間名稱排列

CSS 教學 - Grid 排列網格項目

grid-row-start、grid-row-end、grid-column-start、grid-column-end

grid-row-start、grid-row-end、grid-column-start、grid-column-end 這四個樣式屬性可以透過「網格格線編號」、「網格格線名稱」或「網格名稱」，指定網格項目在網格容器裡上下左右的位置，並根據位置決定這個項目如何排列，這四個屬性初始值都是 auto ( 自動一個接著一個，按照左到右、上到下的順序排列 )，沒有繼承屬性，簡單說明如下：

樣式屬性	說明
`grid-row-start`	上方位置。
`grid-row-end`	下方位置，若未設定，預設值 auto 等同 1。
`grid-column-start`	左側位置。
`grid-column-end`	右側位置，若未設定，預設值 auto 等同 1。

使用格線編號

透過 grid-template-columns 和 grid-template-rows 建立的網格格線都有各自的編號，編號從左到右、或從上到下依序都是從 1 開始一直遞增，只要透過格線編號，就能指定網格項目位置，如果將編號範圍設定超過 1，就會產生不同尺寸的網格項目。

下方範例會將網格容器分成 4x4 共十六等分，透過 grid-row-start、grid-row-end、grid-column-start、grid-column-end 這四個樣式屬性定位兩個 1x1 的項目 ( .demo 的 div 是為了凸顯網格和格線所建立的容器，和實際範例沒有關連 )。

線上展示：https://codepen.io/oxxo/pen/OJKWLXw

<!-- HTML 程式碼-->
<div class="g demo"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g">
  <div class="a1"></div>
  <div class="a2"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    height: 300px;
    outline: 1px solid #000;
    position: absolute;
    top: 50px;
    left: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  .demo div {
    z-index: 2;
    outline: 1px dashed #000;
  }
  .a1 {
    background: #f55;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .a2 {
    background: #55f;
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
  }
</style>

CSS 教學 - Grid 排列網格項目 - Grid 格線編號定位兩個 1x1 的項目

當「end減去 start」的數值等於 0 或沒有設定 end 數值，或 end 數值等於 0，end 就會自動使用「start 加 1」，表示往左或往下延伸一格，若相減後數值大於 1，網格項目的大小就會變大，若為負值則會往反方向延伸，表格說明如下：

網格排列方式	情境
往左或往下延伸一格	end 減去 start 數值為 0 或 1，或 end 等於 0。
往左或往下延伸相減後的數值	end 減去 start 數值大於 1，但 end 不等於 0。
往反方向延伸相減後的「絕對值」	end 減去 start 數值小於 1，end 不等於 0。

下方範例會用三個網格項目呈現不同的排列方式，第一個是單純的「2x2」項目，第二個是往「反方向延伸」的 2x2 項目，第三個是 grid-column-end 設定為 0 且沒有設定 grid-row-end 的項目。

線上展示：https://codepen.io/oxxo/pen/rNXjBMO

<!-- HTML 程式碼-->
<div class="g demo"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g">
  <div class="a1"></div>
  <div class="a2"></div>
  <div class="a3"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    height: 300px;
    outline: 1px solid #000;
    position: absolute;
    top: 50px;
    left: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  .demo div {
    z-index: 2;
    outline: 1px dashed #000;
  }
  .a1 {
    background: #f55;
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  .a2 {
    background: #55f;
    grid-column-start: 3;
    grid-column-end: 1;
    grid-row-start: 3;
    grid-row-end: 5;
  }
  .a3 {
    background: #0c0;
    grid-column-start: 4;
    grid-column-end: 0;
    grid-row-start: 4;
  }
</style>

CSS 教學 - Grid 排列網格項目 - Grid 格線編號延伸網格項目尺寸或往反方向延伸

除了使用單純的格線編號，grid-column-end 和 grid-column-end 也可以在數字之前加上「span」指令，加上 span 指令後，數字代表的就是「幾格」，而不是原本的格線編號，下方範例會使用 span 而延伸的做法，將三個不同的網格項目都往右變成兩格。

線上展示：https://codepen.io/oxxo/pen/vYogBXp

<!-- HTML 程式碼-->
<div class="g demo"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g">
  <div class="a1"></div>
  <div class="a2"></div>
  <div class="a3"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    height: 300px;
    outline: 1px solid #000;
    position: absolute;
    top: 50px;
    left: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  .demo div {
    z-index: 2;
    outline: 1px dashed #000;
  }
  .a1 {
    background: #f90;
    grid-column-start: 1;
    grid-column-end: span 2;
    grid-row-start: 1;
    grid-row-end: 1;
  }
  .a2 {
    background: #55f;
    grid-column-start: 2;
    grid-column-end: span 2;
    grid-row-start: 2;
    grid-row-end: 2;
  }
  .a3 {
    background: #0c0;
    grid-column-start: 3;
    grid-column-end: span 2;
    grid-row-start: 3;
    grid-row-end: 3;
  }
</style>

CSS 教學 - Grid 排列網格項目 - Grid 格線編號使用 span 延伸

使用格線名稱

除了使用格線編號，也可以使用「Grid 網格空間與命名」教學中所介紹的「格線名稱」進行排版定位，下方會先將每條格線命名，接著就能透過名稱指定網格項目的位置和尺寸。

線上展示：https://codepen.io/oxxo/pen/jOgyNMo

<!-- HTML 程式碼-->
<div class="g demo"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g">
  <div class="a1"></div>
  <div class="a2"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    height: 300px;
    outline: 1px solid #000;
    position: absolute;
    top: 50px;
    left: 50px;
    display: grid;
    grid-template-columns: [col-start] 1fr [col-1] 1fr [col-2] 1fr [col-3] 1fr [col-end];
    grid-template-rows: [row-start] 1fr [row-1] 1fr [row-2] 1fr [row-3] 1fr [row-end];
  }
  .demo div {
    z-index: 2;
    outline: 1px dashed #000;
  }
  .a1 {
    background: #f90;
    grid-column-start: col-2;
    grid-column-end: col-end;
    grid-row-start: row-start;
    grid-row-end: row-2;
  }
  .a2 {
    background: #55f;
    grid-column-start: col-start;
    grid-column-end: col-2;
    grid-row-start: row-2;
    grid-row-end: row-end;
  }
</style>

CSS 教學 - Grid 排列網格項目 - Grid 使用格線名稱排列項目

如果遇到「格線名稱相同」的狀況，則可以在格線名稱後方加上「數字」，透過數字標示「格線編號」，數字 1 表示第一條格線，數字 2 表示同名稱的第二條格線，其他依此類推，下方範例會將垂直格線名稱設為「oxxo col oxxo col oxxo」，水平格線名稱設為「xoox row xoox row xoox」，透過名稱和格線編號進行排版。

線上展示：https://codepen.io/oxxo/pen/ZEgLzBY

<!-- HTML 程式碼-->
<div class="g demo"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g">
  <div class="a1"></div>
  <div class="a2"></div>
  <div class="a3"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    height: 300px;
    outline: 1px solid #000;
    position: absolute;
    top: 50px;
    left: 50px;
    display: grid;
    grid-template-columns: [oxxo] 1fr [col] 1fr [oxxo] 1fr [col] 1fr [oxxo];
    grid-template-rows: [xoox] 1fr [row] 1fr [xoox] 1fr [row] 1fr [xoox];
  }
  .demo div {
    z-index: 2;
    outline: 1px dashed #000;
  }
  .a1 {
    background: #f90;
    grid-column-start: col 1;
    grid-column-end: oxxo 3;
    grid-row-start: xoox 1;
    grid-row-end: row 1;
  }
  .a2 {
    background: #55f;
    grid-column-start: oxxo 1;
    grid-column-end: oxxo 2;
    grid-row-start: row 1;
    grid-row-end: row 2;
  }
  .a3 {
    background: #0c0;
    grid-column-start: col 2;
    grid-column-end: oxxo 3;
    grid-row-start: row 2;
    grid-row-end: xoox 3;
  }
</style>

CSS 教學 - Grid 排列網格項目 - Grid 格線名稱相同時，可加上編號區隔

使用網格名稱

如果使用 grid-template-areas 設定網格空間名稱，設定後會自動在「同名稱的封閉空間」四周的網格線加上名稱，例如名稱為 oxxo 的網格，會產生水平和垂直方向的網格線，都會附加 oxxo-start 和 oxxo-end 名稱 ( 參考「Grid 網格空間與命名」 )，因此也可以透過這些附加的格線名稱進行定位，但需要注意同名稱的封閉空間裡「沒有自動添加的格線名稱」，下方範例會使用自動添加的格線名稱進行定位。

線上展示：https://codepen.io/oxxo/pen/VwoPZmM

<!-- HTML 程式碼-->
<div class="g demo"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g">
  <div class="a1"></div>
  <div class="a2"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    height: 300px;
    outline: 1px solid #000;
    position: absolute;
    top: 50px;
    left: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
      "header header header header"
      "col1 col2 col3 col4"
      "col5 col6 col7 col8"
      "footer footer footer footer"
  }
  .demo div {
    z-index: 2;
    outline: 1px dashed #000;
  }
  .a1 {
    background: #f90;
    grid-column-start: col3-start;
    grid-column-end: header-end;
    grid-row-start: header-start;
    grid-row-end: col4-end;
  }
  .a2 {
    background: #55f;
    grid-column-start: header-start;
    grid-column-end: col6-end;
    grid-row-start: col5-start;
    grid-row-end: footer-end;
  }
</style>

CSS 教學 - Grid 排列網格項目 - Grid 格線使用網格名稱定位

grid-row、grid-column 樣式屬性縮寫

grid-row 是 grid-row-start 和 grid-row-end 的縮寫，grid-column 是grid-column-start 和 grid-column-end 的縮寫，start 和 end 使用「/」分隔，start 在前 end 在後，並使用和四個樣式屬性相同的屬性值，寫法如下：

div {
  display: grid;
  grid-row: grid-row-start / grid-row-end;
  grid-column: grid-column-start / grid-column-end;
}

下方修改之前「格線名稱相同」範例，將四個屬性值的寫法改成縮寫寫法，除了結果相同，整體 CSS 程式碼也更佳簡潔容易閱讀。

線上展示：https://codepen.io/oxxo/pen/gOVgYLK

<!-- HTML 程式碼-->
<div class="g demo"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g">
  <div class="a1"></div>
  <div class="a2"></div>
  <div class="a3"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    height: 300px;
    outline: 1px solid #000;
    position: absolute;
    top: 50px;
    left: 50px;
    display: grid;
    grid-template-columns: [oxxo] 1fr [col] 1fr [oxxo] 1fr [col] 1fr [oxxo];
    grid-template-rows: [xoox] 1fr [row] 1fr [xoox] 1fr [row] 1fr [xoox];
  }
  .demo div {
    z-index: 2;
    outline: 1px dashed #000;
  }
  .a1 {
    background: #f90;
    grid-column: oxxo 2 / oxxo 3;
    grid-row: xoox 1 / row 1;
  }
  .a2 {
    background: #55f;
    grid-column: oxxo 1 / oxxo 2;
    grid-row: row 1 / row 2;
  }
  .a3 {
    background: #0c0;
    grid-column: col 2 / oxxo 3;
    grid-row: row 2 / xoox 3;
  }
</style>

CSS 教學 - Grid 排列網格項目 - grid-row、grid-column 樣式屬性縮寫

grid-area 使用網格空間名稱排列

除了使用格線定位，還可以透過 grid-area 樣式屬性，根據「網格空間的名稱」進行定位，這種定位方式可以不用考慮太多格線名稱，快速將網格元素放入並填滿「網格封閉空間」，因此程式碼有時會更好理解，下方範例會使用 grid-area 放入五個網格元素，因為使用空間名稱的緣故，從程式碼就很好理解網格排版後的長相。

線上展示：https://codepen.io/oxxo/pen/VwoPZPM

<!-- HTML 程式碼-->
<div class="g demo"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g">
  <div class="a1"></div>
  <div class="a2"></div>
  <div class="a3"></div>
  <div class="a4"></div>
  <div class="a5"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    height: 300px;
    outline: 1px solid #000;
    position: absolute;
    top: 50px;
    left: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
      "header header header side"
      "menu oxxo oxxo side"
      "menu oxxo oxxo side"
      "menu footer footer footer"
  }
  .demo div {
    z-index: 2;
    outline: 1px dashed #000;
  }
  .a1 {
    background: #f90;
    grid-area: header;
  }
  .a2 {
    background: #55f;
    grid-area: menu;
  }
  .a3 {
    background: #0c0;
    grid-area: oxxo;
  }
  .a4 {
    background: #f5b;
    grid-area: footer;
  }
  .a5 {
    background: #0ff;
    grid-area: side;
  }
</style>

CSS 教學 - Grid 排列網格項目 - grid-area 使用網格空間名稱排列

小結

這篇教學介紹了多種放入網格項目的方法，這些方法可以根據不同的使用情境而變化，通常單純使用格線編號或網格空間名稱就能解決大部分的排版狀況，趕快將這些樣式屬性運用到自己的網站中吧。

延伸閱讀：Grid 網格容器與格線、Grid 網格空間與命名、Grid 網格流向與間距

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

Grid 排列網格項目

grid-row-start、grid-row-end、grid-column-start、grid-column-end

使用格線編號

使用格線名稱

使用網格名稱

grid-row、grid-column 樣式屬性縮寫

grid-area 使用網格空間名稱排列

小結

意見回饋

CSS 教學

基本介紹

CSS 選擇器

數值與單位

變數與函式

文字樣式

元素容器

背景與陰影

清單與表格

基本排版與定位

Flexbox 彈性排版

Grid 網格排版