如何在网格中设置高度自动？

Question

首先看图片。

如何删除多余的空间？我想根据内容设置框的高度。我怎样才能在网格中做到这一点？

查看以下代码。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  background-color: #ddd;
  padding: 10px;
  /* Grid CSS */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.container div {
  border: 1px solid #000;
  padding: 15px;
}

<div class="container">
  <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias ipsum consectetur quod rem dolores? Dolorem, debitis quos. Illo aliquam hic cupiditate nemo temporibus quibusdam commodi dicta quisquam, saepe laboriosam tempore minus et rem architecto
    modi voluptatibus neque! Porro quibusdam itaque praesentium maxime rem deleniti est, sed dolorum reprehenderit pariatur provident.</div>
  <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum accusantium quos dolorem esse pariatur! Illo harum voluptatibus labore obcaecati cum?</div>
  <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias ipsum consectetur quod rem dolores? Dolorem, debitis quos. Illo aliquam hic cupiditate nemo temporibus quibusdam commodi dicta quisquam, saepe laboriosam tempore minus et rem architecto
    modi voluptatibus neque! Porro quibusdam itaque praesentium maxime rem deleniti est, sed dolorum reprehenderit pariatur provident.</div>
  <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum accusantium quos dolorem esse pariatur! Illo harum voluptatibus labore obcaecati cum?</div>
</div>

我想用下面的框填充顶部框的底部空间。在网格中可以吗？

Answer 1

您可以使用 align-items 属性：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  background-color: #ddd;
  padding: 10px;
  /* Grid CSS */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.container div {
  border: 1px solid #000;
  padding: 15px;
}

<div class="container">
  <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias ipsum consectetur quod rem dolores? Dolorem, debitis quos. Illo aliquam hic cupiditate nemo temporibus quibusdam commodi dicta quisquam, saepe laboriosam tempore minus et rem architecto
    modi voluptatibus neque! Porro quibusdam itaque praesentium maxime rem deleniti est, sed dolorum reprehenderit pariatur provident.</div>
  <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum accusantium quos dolorem esse pariatur! Illo harum voluptatibus labore obcaecati cum?</div>
  <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias ipsum consectetur quod rem dolores? Dolorem, debitis quos. Illo aliquam hic cupiditate nemo temporibus quibusdam commodi dicta quisquam, saepe laboriosam tempore minus et rem architecto
    modi voluptatibus neque! Porro quibusdam itaque praesentium maxime rem deleniti est, sed dolorum reprehenderit pariatur provident.</div>
  <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum accusantium quos dolorem esse pariatur! Illo harum voluptatibus labore obcaecati cum?</div>
</div>