Grid 排列网格项目

网格格线规划完成后，下一步就是按照格线规划，将网格项目排列在指定的位置，这篇教学会介绍 grid-row-start、grid-row-end、grid-column-start、grid-column-end、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 教学 - 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 网格项目对齐、顺序与对齐

意见反馈

CSS 教学

基本介绍

CSS 选择器

数值与单位

规则与定义

函数类型

颜色与滤镜

文字与段落

元素容器

背景与阴影

清单与表格

基本排版与定位

Flex 弹性排版

Grid 网格排版

转场与动画

变形、裁切与遮罩

视窗与用户行为

CSS 预处理器

范例效果