Vue div显示网格删除行之间的额外空间答案

【问题标题】：Vue div display grid remove extra space between rowsVue div显示网格删除行之间的额外空间
【发布时间】：2021-11-01 08:02:56
【问题描述】：

我是 Vue 的新手，对于这个项目，我试图在每行显示 2 个玩家作为一个 div。我在 playerDiv id 上使用display: grid; CSS 解决了这个问题。问题是我现在遇到的问题是它在第一行、第二行和第三行之间造成了巨大的差距。有没有办法消除每行之间的差距？

我将高度用作440px 用于playerDiv 和30px 用于eachPlayerDiv。我无法改变这一点，因为有时 todos 上的数据库值可能只有 2 名玩家或 12 名玩家。有没有办法在不改变我定义的高度的情况下解决这个间隙问题？

目前显示为

Player 1                       Player 2




Player 3                       Player 4




Player 5                       Player 6

有没有办法将玩家显示为

Player 1                       Player 2
Player 3                       Player 4
Player 5                       Player 6

JsFiddle 链接 = https://jsfiddle.net/ujjumaki/f0js3pLa/25/

查看

<div id="app">

  <div id="playerDiv">
    <div v-for="element in todos" class="eachPlayerDiv">
      {{element.text}}
    </div>
  </div>
</div>
<style>
#playerDiv{
  height:440px;
  background-color: white;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color:red;
}

.eachPlayerDiv{
  border-style:solid;
  background-color:yellow;
  height: 30px;
}
</style>

方法

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "David", id: 1 },
      { text: "John", id: 2 },
      { text: "Alek", id: 3 },
      { text: "Joshua", id: 4},
      { text: "Jonny", id: 5},
      { text :"Sam", id:6}
    ]
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

【问题讨论】：

只需将行高定义为 30px 并使用 flexbox 将整个网格居中。

标签： javascript css twitter-bootstrap vue.js

【解决方案1】：

将网格包装在定义为flexbox 的容器中。从 grid-container 中移除 440px 的高度并将其应用到 flexbox 容器中。即可以使用垂直对齐（align-item）使网格居中，行间没有间隙。

//for demonstration purpose only

document.querySelector('#playerDiv').innerHTML = '<div class="eachPlayerDiv">Box 1</div><div class="eachPlayerDiv">Box 2</div><div class="eachPlayerDiv">Box 3</div><div class="eachPlayerDiv">Box 4</div><div class="eachPlayerDiv">Box 5</div><div class="eachPlayerDiv">Box 6</div>';

.wrapper {
  height: 440px;
  display: flex;
  align-items: center; /* vertical center */
  border: 1px solid red; /* for demo purpose only */
}
  


#playerDiv {
  flex-grow: 1; /* let the grid consume the entire width */
  background-color: white;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: red;
}

.eachPlayerDiv {
  border-style: solid;
  background-color: yellow;
  height: 30px;
}

<div id="app">
  <div class="wrapper">
    <div id="playerDiv">
      <div v-for="element in todos" class="eachPlayerDiv">
        {{element.text}}
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

尝试添加align-content: start; 或center 或end，具体取决于您要放置playerDiv 的位置

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "David", id: 1 },
      { text: "John", id: 2 },
      { text: "Alek", id: 3 },
      { text: "Joshua", id: 4},
      { text: "Jonny", id: 5},
      { text :"Sam", id:6}
    ]
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

  <div id="playerDiv">
    <div v-for="element in todos" class="eachPlayerDiv">
      {{element.text}}
    </div>
  </div>
</div>
<style>
#playerDiv{
  height:440px;
  background-color: white;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color:red;
  align-content: start;
}

.eachPlayerDiv{
  border-style:solid;
  background-color:yellow;
  height: 30px;
}
</style>

【讨论】：