具有动态高度的CSS方格网格？

Question

完整示例请参见： https://codepen.io/ScottBeeson/pen/BmxLxL

$('#btnAddBox').on('click', function() {
  $('.wrapper').append('<div class="box"></div>');
})
$('#btnReset').on('click', function() {
  $('.wrapper').html('<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>');
})

body {
  margin: 40px;
}

.wrapper {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  display: grid;
  grid-template-rows: 23px;
  grid-auto-rows: 23px;
  grid-template-columns: repeat(4, 23px);
  grid-gap: 2px;
  background-color: #fff;
  color: #444;
  border: 1px solid blue;
}

.box {
  background-color: #444;
  color: #fff;
  padding: 0px;
  font-size: 100%;
}

#btnAddBox {
  position: absolute;
  top: 5px;
  left: 105px;
  cursor: pointer;
  background-color: gray;
  color: white;
  padding: 4px;
}

#btnReset {
  position: absolute;
  top: 35px;
  left: 105px;
  cursor: pointer;
  background-color: red;
  color: white;
  padding: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div id='btnAddBox'>+ Add Box</div>
<div id='btnReset'>Reset</div>

我正在为仪表盘使用CSS Grid。可以添加和删除瓷砖。现在，我正在使用以下方式创建一个正方形的网格：

grid-template-rows: repeat(30, 23px);
grid-template-columns: repeat(4, 23px);

这个可以实现，但是如果我添加或删除瓷砖，则包装器的高度不会相应调整。我该怎么做？

- user736893

Answer 1

你可以使用grid-auto-rows来实现自动调整行高，不需要像grid-template-rows那样预先指定行数。这使得它随着尺寸的增加而自动调整。

由于你的列是固定的，因此可以使用grid-template-columns和repeat(4)。如果你想增加列数，可以使用类似的方式使用grid-auto-columns。

.wrapper {
  box-sizing: border-box;
  position: absolute;
  top: 0; left: 0; width: 100px;
  display: grid;

  /* Added these */
  grid-template-columns: repeat(4, 23px);
  grid-auto-rows: 23px;
  /* Added these */      

  grid-gap: 2px;
  background-color: #fff;
  color: #444;
  border: 1px solid blue;
}

$('#btnAddBox').on('click',function() {
  $('.wrapper').append('<div class="box"></div>');
})
$('#btnReset').on('click',function() {
  $('.wrapper').html('<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>');
})

body {
  margin: 40px;
}

.wrapper {
  box-sizing: border-box;
  position: absolute;
  top: 0; left: 0; width: 100px;
  display: grid;
  
  grid-template-columns: repeat(4, 23px);
  grid-auto-rows: 23px;
  grid-gap: 2px;
  background-color: #fff;
  color: #444;
  border: 1px solid blue;
}

.box {
  background-color: #444;
  color: #fff;
  padding: 0px;
  font-size: 100%;
}

#btnAddBox {
  position: absolute;
  top: 5px; left: 105px;
  cursor: pointer;
  background-color: gray;
  color: white;
  padding: 4px;
}
#btnReset {
  position: absolute;
  top: 35px; left: 105px;
  cursor: pointer;
  background-color: red;
  color: white;
  padding: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div id='btnAddBox'>+ Add Box</div>
<div id='btnReset'>Reset</div>

- Nandu Kalidindi