如何在行和列（每行2列）结构中排列视频瓷砖，以便一个视频瓷砖将占据所有可用的位置。但是，如果动态添加更多的视频块，它们应该遵循网格结构，并且块应该变得更小，以不超过总面积。例如，在有3个视频块的情况下，第一行的每一列应该有2个块，第二行的两列都应该有1个块。是否可以使用CSS实现此功能？

编辑:

为了简化，让我们考虑div而不是视频块:

这适用于偶数个div，它们被安排在每行2个col中。但是对于奇数div来说，其余的div不占整个行的宽度。

顺晟科技：

Flex解决方案:

您可以选择网格中的最后一个元素，同时指定它必须是奇数元素，如下所示:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 37.5rem; 
}

.grid > * {
  background-color: #ddd;
  margin: 0 0 1rem; 
  padding: .5rem;
  text-align: center;
}

并使其宽度为正常宽度的两倍。

您必须仔细考虑在不能并排容纳两个“正常”div且宽度不增加一倍的窄设备上到底要发生什么。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 37.5rem; 
}

.grid > * {
  background-color: #ddd;
  margin: 0 0 1rem; 
  padding: .5rem;
  text-align: center;
}

在这里