Vue项目display:grid布局如何消除行与行之间的多余空白间隙

你遇到的行间隙问题是Grid布局默认配置导致的：#playerDiv的固定高度远大于所有玩家项的总高度时，Grid默认的align-content: stretch规则会自动拉伸行高、分配多余空间到行与行之间，就产生了较大空白。

你只需要在#playerDiv的CSS规则中新增一行align-content: start即可，不需要修改原有已定义的高度属性，修改后的样式代码如下：

#playerDiv{
  height:440px;
  background-color: white;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color:red;
  /* 新增以下配置即可消除行间隙 */
  align-content: start;
}

配置说明 #

• align-content: start会让所有Grid行从容器顶部开始紧密排列，不会自动拉伸行高填充容器剩余空间，每行高度会严格适配.eachPlayerDiv的30px固定高度，自然实现玩家项紧密排列的效果。
• 该配置完全兼容玩家数量2~12的浮动场景，不会对你原有固定高度的规则产生任何影响。如果需要让所有玩家项在容器内垂直居中紧密排列，也可以把属性值改为align-content: center。

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