【如何用一行代码设置grid子元素占满一行位置】在使用 CSS Grid 布局时，有时候我们希望某个子元素能够占据整行的空间，而不是按照默认的网格列来分配。这种情况下，可以通过一行简洁的代码实现这一效果。
在 CSS Grid 中，要让一个子元素占满整行，可以使用 `grid-column` 属性，并将其设置为 `1 / -1`。这样可以让该子元素从第一列开始，一直延伸到最后一列，从而占据整行空间。这种方式不仅简洁，而且兼容性良好，适用于大多数现代浏览器。
表格展示
| 属性名 | 值 | 说明 |
| `grid-column` | `1 / -1` | 让子元素从第一列开始，到最后一列结束 |
| `grid-row` | 可选（默认） | 若需控制行方向，可单独设置 |
| `grid-template-columns` | 自定义列宽 | 确保列数足够多，以支持占满整行 |
示例代码：
```css
.child {
grid-column: 1 / -1;
}
```
这段代码将 `.child` 元素设置为从第一列开始，跨越所有列，实现“占满一行”的效果。
通过这种方式，你可以轻松地在 Grid 布局中实现灵活的布局调整，而无需复杂的计算或额外的 HTML 结构。
