如何使网格项跨越隐式 CSS 网格中的所有行/列？

使网格项目跨越到隐式网格中的最后一行/列

问题：如何将网格项目从第一个跨越到最后一个隐式网格中的行或列，其中行/列数为未知？

背景：

隐式网格是具有多个轨道的网格，这些轨道是根据其中的内容自动生成的。如果没有明确的网格定义，确定存在的行/列数就变得具有挑战性。

当前限制：

不幸的是，在当前的 CSS 网格规范中，它不是可以使用网格属性将网格项跨越隐式网格中的所有行/列

替代方案：

• 绝对定位： 正如另一个答案中所建议的，绝对定位允许您定义位置和大小与网格布局无关的元素。然而，这种方法偏离了基于网格的方法。

显式网格的解决方案：

虽然在隐式网格中无法实现跨越项目，但这是可能的以明确的方式完成它grids.

理解负整数：

CSS 网格规范允许在网格放置属性中使用负整数。正整数从头开始计数，负整数从末尾开始计数。

跨越网格项目：

将网格项目从第一列跨越到最后一列显式网格，使用：

grid-column: 1 / -1;

这表示网格项应从第一列行开始并在最后一列结束 线。相同的概念适用于跨行。

注意：

此方法仅在使用 grid-template-properties 显式定义网格（行、列和区）。

以上是如何使网格项跨越隐式 CSS 网格中的所有行/列？的详细内容。更多信息请关注PHP中文网其他相关文章！