具有动态高度的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);

这有效，但如果我添加或删除图块，包装器的高度不会相应调整。我怎样才能做到这一点？

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>