CSS Grid 项目属性

容器属性把格子画好了，这篇解决项目怎么占位。项目属性写在网格项目上，控制它从哪条线开始、跨几列几行。

grid-column 和 grid-row

写法是起始线斜杠结束线，斜杠前后分别是开始和结束的网格线编号。grid-column: 1 / 3 表示从第 1 条列线到第 3 条列线，中间跨了 2 列。grid-row 同理管行方向。

.item-a {
  grid-column: 1 / 3;  /* 从第 1 条列线到第 3 条列线，占 2 列 */
  grid-row: 1 / 2;     /* 从第 1 条行线到第 2 条行线，占 1 行 */
}
.item-b {
  grid-column: span 2;  /* 跨 2 列，起点自动安排 */
  grid-row: span 2;     /* 跨 2 行，拼出 2 乘 2 的大块 */
}

另一种写法用 span 关键字，span 后面跟跨的数量，不用自己数线。两种写法各有用途，精确占位用线编号，想让浏览器自动安排就用 span。

grid-area 四值简写

grid-column 和 grid-row 要写两行，grid-area 把它们合并成一行，四个值的顺序是行起、列起、行止、列止。

.item {
  grid-area: 1 / 1 / 3 / 3;  /* 行起 1，列起 1，行止 3，列止 3 */
}

记忆口诀是行行列列，先写行再写列，起止交叉夹出矩形。很多新手记成列先行后，项目就跑到奇怪的位置，出错时对着网格线数一遍就能发现。

区域命名法

线编号定位精确，但满屏数字读起来费劲。grid-template-areas 换个思路，给区域起名字，用引号里的 ASCII 图直接画出布局。下面是一个经典页面骨架，header、sidebar、main、footer 四个区域。

<div class="layout">
  <header class="header">页头</header>
  <aside class="sidebar">侧边栏</aside>
  <main class="main">主体内容</main>
  <footer class="footer">页脚</footer>
</div>

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;  /* 左列 200px，右列占满 */
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header { grid-area: header; }    /* 用名字关联区域 */
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

每个引号里按列数写名字，同一行相邻的相同名字自动合并成一块。上面这张图一眼就能看懂，第一行通栏 header，第二行左边 sidebar 右边 main，第三行通栏 footer。HTML 里的四个块按什么顺序写都行，位置由 CSS 说了算。

注意两个坑。第一，区域必须是矩形，L 形或凹字形会让整个模板失效。第二，相同的名字只允许连成一块，分开放会报错。想留空某个格子，用点号代替名字，一个点占一个单元格。

用区域法改写 12 栅格

还记得上一篇的 12 栅格吗，区域法可以套 12 列，画出常见页面布局。

.layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "header header header header header header header header header header header header"
    "sidebar sidebar sidebar main main main main main main main main main"
    "footer footer footer footer footer footer footer footer footer footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

模板里 header 占满 12 列，sidebar 占 3 列，main 占 9 列，footer 通栏。布局想改成什么样，直接改引号里的图，维护起来比数线编号直观得多。

项目属性小结，grid-column、grid-row 用线编号或 span 控制跨行跨列，grid-area 是四值简写，grid-template-areas 把布局画成 ASCII 图，是整页布局的首选写法。