html - 砌体框布局无法根据使用 CSS 的文本工作

Question

我正在创建如下图所示的砌体效果。

我得到这个输出

现在我的问题是，我必须根据内容安排每个盒子的高度。请注意盒子上的第一个它太大了，11 个盒子的内容很小。

.wrapper {
  padding: 40px 0;
}

.grid-container-article {
  display: grid;
  grid-gap: 2em;
  grid-template-columns: repeat(3, 1fr);
}

.grid-container-article .grid-item {
  background-color: #FFD966;
  padding: 20px;
}

.grid-container-article .grid-item-1 {
  grid-column: 1/2;
  grid-row: 1/3;
}

.grid-container-article .grid-item-4 {
  grid-column: 2/3;
  grid-row: 2/3;
}

.grid-container-article .grid-item-5 {
  grid-column: 3/4;
  grid-row: 2/4;
}

.grid-container-article .grid-item-6 {
  grid-column: 1/2;
  grid-row: 3/5;
}

.grid-container-article .grid-item-7 {
  grid-column: 2/3;
  grid-row: 3/5;
}

.grid-container-article img {
  width: 100%;
}

<div class="wrapper">
  <div class="container">
    <div class="grid-container-article">
      <div class="grid-item grid-item-1">
        <img src="https://i.picsum.photos/id/1000/5626/3635.jpg?hmac=qWh065Fr_M8Oa3sNsdDL8ngWXv2Jb-EE49ZIn6c0P-g">
        <h1>1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
      </div>
      <div class="grid-item grid-item-2">
        <h1>2</h1>
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>

      </div>
      <div class="grid-item grid-item-3">
        <h1>3</h1>
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
      </div>
      <div class="grid-item grid-item-4">
        <h1>4</h1>
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
      </div>
      <div class="grid-item grid-item-5">
        <img src="https://i.picsum.photos/id/1000/5626/3635.jpg?hmac=qWh065Fr_M8Oa3sNsdDL8ngWXv2Jb-EE49ZIn6c0P-g">
        <h1>5</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
      </div>
      <div class="grid-item grid-item-6">
        <img src="https://i.picsum.photos/id/1000/5626/3635.jpg?hmac=qWh065Fr_M8Oa3sNsdDL8ngWXv2Jb-EE49ZIn6c0P-g">
        <h1>6</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
      </div>
      <div class="grid-item grid-item-7">
        <img src="https://i.picsum.photos/id/1000/5626/3635.jpg?hmac=qWh065Fr_M8Oa3sNsdDL8ngWXv2Jb-EE49ZIn6c0P-g">
        <h1>7</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
      </div>
      <div class="grid-item grid-item-8">
        <h1>8</h1>
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
      </div>
      <div class="grid-item grid-item-9">
        <h1>9</h1>
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
      </div>
      <div class="grid-item grid-item-10">
        <h1>10</h1>
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore </p>
      </div>
      <div class="grid-item grid-item-11">
        <h1>11</h1>
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
      </div>
    </div>
  </div>
</div>

标签： htmlcssmasonry