CSS中grid-row: 1的作用是什么？单值语法如何使用？

首先明确：grid-row和grid-column都是CSS Grid的简写属性，单值赋值时仅指定起始位置，结束位置默认取auto，完整展开规则如下：

• grid-row: 1等价于：

  grid-row-start: 1;
  grid-row-end: auto;
  

• grid-column: 1等价于：

  grid-column-start: 1;
  grid-column-end: auto;
  

赋值为1时的具体表现 #

CSS Grid布局的网格线默认从1开始计数，按从左到右（列方向）、从上到下（行方向）的顺序编号：

1. grid-row: 1：指定元素顶部对齐网格容器的第1条行网格线，grid-row-end: auto默认让元素占用1行高度，最终元素垂直方向覆盖第1条到第2条行网格线之间的区域。
2. grid-column: 1：指定元素左侧对齐网格容器的第1条列网格线，grid-column-end: auto默认让元素占用1列宽度，最终元素水平方向覆盖第1条到第2条列网格线之间的区域。

举个直观的示例：

/* 网格容器样式 */
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 定义3列，每列宽100px */
  grid-template-rows: 50px 50px; /* 定义2行，每行高50px */
  gap: 10px;
}
/* 子元素样式 */
.grid-item {
  grid-row: 1;
  grid-column: 1;
  background: #f00;
}

上述代码中，.grid-item会固定定位在容器左上角的第一个单元格，尺寸为100px*50px。

扩展规则 #

所有正整数的单值赋值逻辑完全一致，比如grid-row: 3就表示元素从第3条行网格线开始，向下占用1行。如果需要跨多个轨道，可以搭配span关键字使用，比如grid-row: 1 / span 2表示从第1条行线开始，向下跨2行。

内容的提问来源于stack exchange，提问作者nCardot