如何让内容跨多个CSS Grid网格列，实现页脚版权声明占满整行宽度？

可以直接通过样式覆盖实现需求，无需修改原有JS逻辑或基础网格配置，核心是利用CSS Grid的跨列属性实现整行占满：

• 给版权栏对应的DOM元素设置grid-column: 1 / -1即可，该属性会让元素从网格的第一条列线延伸到最后一条列线，不管网格设置了多少列，都会自动占满整行宽度，完美适配你当前的3列网格布局。
• 如果优先级不足无法覆盖原有样式，可以给属性加!important，或者写更高优先级的选择器即可。

代码示例 #

/* 请将.copyright替换为你实际的版权栏类名/选择器 */
footer > .copyright {
  grid-column: 1 / -1 !important;
  /* 如果需要调整版权栏所在的行顺序，可以额外加grid-row属性，比如放在最后一行就写 grid-row: 999; */
}

该方案兼容所有支持Grid布局的浏览器，即使后续你调整页脚的网格列数，grid-column: 1 / -1的写法也无需修改即可自动适配新的列数，灵活性更高。

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