使用CSS网格，当一列的高度变大时，如何防止其他列的伸缩？

使用CSS网格布局时，可以通过设置网格项的grid-auto-rows属性来控制行的高度。默认情况下，网格项的行高会根据内容的高度自动调整，导致其他列的伸缩。为了防止其他列的伸缩，可以将grid-auto-rows属性设置为一个固定的值，例如：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px; /* 设置行高为100px */
  grid-gap: 10px;
}

.grid-item {
  /* 网格项的样式 */
}

在上述示例中，.grid-container是网格容器，使用grid-template-columns定义了3列等宽的网格。通过设置grid-auto-rows为100px，可以固定行的高度为100px，从而防止其他列的伸缩。

这种方法适用于需要固定行高的情况，例如展示图片网格、卡片布局等。如果需要实现更复杂的网格布局，可以结合使用其他CSS属性和技巧，如grid-template-rows、grid-template-areas等。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云CSS网格布局教程