Question

我对CSS Grid很陌生。我有一个简单的画廊，其中的物品栏是未知的。

我为父母提供以下CSS：

.gallery {    
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
    grid-auto-flow: dense;
    grid-gap: 1px;
}

图库中的项目可以具有包含多列的类，例如：

.grid-col-2 {
    grid-column: span 2;
}

但是我有一个问题。调整浏览器大小（或在移动设备中）时，如果只有一列有空间（在我的情况下宽度小于600像素），则grid-column会破坏布局，而不是只有一列，而是有2列，第二列的大小不正确。

现在我想到的第一件事是创建一个媒体规则，该规则规定宽度小于600像素，而改用grid-column: 1 / -1。但这给我带来了另一个问题（没有解决方案），画廊不一定是窗口宽度的100％，也没有基于父级宽度的媒体规则。

以下是显示正在发生的情况的图像：

是否有一种方法可以告诉网格不要由于grid-column而创建多余的列，而是只占用一整行而不破坏布局？