html - 网格 CSS 布局

Question

我创建了一个包含 6 个 div 的网格布局。如果我在第一个 div 中写入文本，它会根据文本扩展，行中的所有 div 也是如此。但是有没有可能做一些事情，使一行中只有 1 个 div 扩展，而其他 div 不扩展？

.grid_body {
   display: grid;
   grid-template-columns: repeat(3,1fr);
   grid-column-gap: 17.5px;
   grid-auto-rows: minmax(400px, auto );
   grid-row-gap: 35px;
   position: absolute;
   top: 100px;
   left: 17.5px;
}

.grid_item {
   width: 300px;
   background-color: white;
   border: 5px solid rgb( 5, 214, 73, 1 );
}

.grid_item img {
   margin: 10px;
}

.grid_item a {
   text-decoration: none;
   color: black;
}

.grid_item a:hover {
   text-decoration: underline;
}

.grid_item p {
   text-align: justify;
   margin: 10px;
}

<div class="grid_body">
  <div class="grid_item"><a href="#"><img src="../img/img1.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.
  iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequnt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.
  iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequint, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.
  iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequii </p></a>
 </div>
  <div class="grid_item"><a href="#"><img src="../img/img2.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.</p></a>
</div>
  <div class="grid_item"><a href="#"><img src="../img/img3.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.</p></a>
</div>
<div class="grid_item"><a href="#"><img src="../img/img1.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p></a>
</div>
  <div class="grid_item"><a href="#"><img src="../img/img2.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p></a>
</div>
  <div class="grid_item"><a href="#"><img src="../img/img3.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p></a>
  </div>
  <div class="grid_item"><a href="#"><img src="../img/img3.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p></a>
  </div>
  <div class="grid_item"><a href="#"><img src="../img/img3.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p></a>
  </div>
  <div class="grid_item"><a href="#"><img src="../img/img3.jpg"></a><a href="#"><p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p></a>
  </div>
 </div>

标签： htmlcss

Answer 1

只需添加align-items: start;到网格容器中。记住一行仍然是一行，所以这会给你的布局中的“洞”。

如果您需要砖石类型的布局，您将来可以使用grid-template-rows: masonry;。到目前为止，Firefox 是唯一支持这个标志的浏览器。

.grid_body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 17.5px;
  grid-auto-rows: minmax(400px, auto);
  row-gap: 35px;
  position: absolute;
  top: 100px;
  left: 17.5px;
  align-items: start;
}

.grid_item {
  width: 300px;
  background-color: white;
  border: 5px solid rgb( 5, 214, 73, 1);
}

.grid_item img {
  margin: 10px;
}

.grid_item a {
  text-decoration: none;
  color: black;
}

.grid_item a:hover {
  text-decoration: underline;
}

.grid_item p {
  text-align: justify;
  margin: 10px;
}

<div class="grid_body">
  <div class="grid_item">
    <a href="#"><img src="../img/img1.jpg"></a>
    <a href="#">
      <p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et
        harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti. iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem
        sequnt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti. iure reprehenderit, quia voluptas sit,
        aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequint, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et harum quidem rerum facilis est et expedita distinctio, qui blanditiis
        praesentium voluptatum deleniti atque corrupti. iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequii </p>
    </a>
  </div>
  <div class="grid_item">
    <a href="#"><img src="../img/img2.jpg"></a>
    <a href="#">
      <p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et
        harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.</p>
    </a>
  </div>
  <div class="grid_item">
    <a href="#"><img src="../img/img3.jpg"></a>
    <a href="#">
      <p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et
        harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti.</p>
    </a>
  </div>
  <div class="grid_item">
    <a href="#"><img src="../img/img1.jpg"></a>
    <a href="#">
      <p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et
        harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim
        ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
    </a>
  </div>
  <div class="grid_item">
    <a href="#"><img src="../img/img2.jpg"></a>
    <a href="#">
      <p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et
        harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim
        ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
    </a>
  </div>
  <div class="grid_item">
    <a href="#"><img src="../img/img3.jpg"></a>
    <a href="#">
      <p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et
        harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim
        ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
    </a>
  </div>
  <div class="grid_item">
    <a href="#"><img src="../img/img3.jpg"></a>
    <a href="#">
      <p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et
        harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim
        ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
    </a>
  </div>
  <div class="grid_item">
    <a href="#"><img src="../img/img3.jpg"></a>
    <a href="#">
      <p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et
        harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim
        ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
    </a>
  </div>
  <div class="grid_item">
    <a href="#"><img src="../img/img3.jpg"></a>
    <a href="#">
      <p>Quis autem vel eum iure reprehenderit, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, velit esse cillum dolore eu fugiat nulla pariatur.Et
        harum quidem rerum facilis est et expedita distinctio, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus? Ut enim
        ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
    </a>
  </div>
</div>