html - 具有动态高度的正方形 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 作为仪表板。可以添加和删除图 block 。现在我正在使用以下内容创建正方形网格:

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

这是可行的，但如果我添加或删除图 block ，包装器的高度不会相应调整。我该怎么做？

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>