Макет CSS-сетки

#html #css

Вопрос:

Я создал макет сетки с 6 разделениями. Если я пишу текст в первом div, он расширяется в зависимости от текста, как и все div в строке. Но можно ли что-то сделать так, чтобы только 1 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>

1. Вероятно. Где ваш код?

2. Я добавил код, посмотрите, пожалуйста, в первый div я добавил текст, но 2 divs подряд тоже расширяются. Я знаю, что это свойство grid, но я изучаю html, и мне интересно, смогу ли я написать текст, divs будет расширяться по-разному

3. В StackOverflow вам необходимо управлять жизненным циклом ваших вопросов. Это означает, что если вы получаете ответы, и они решают вашу проблему, выберите ответ, который отвечает на нее наилучшим образом. Если нет, прокомментируйте приведенные ответы и объясните, почему они не помогают вам решить вашу проблему.

Ответ №1:

 .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;
   width:20px;
   word-wrap:break-word;
   border:thin black solid;
}

.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>(bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb)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, qherahdkfbhsdjsgdkrygfbvasjvbgfhvbjhvbhsbhfkbvjuis 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>

Если я понимаю, что ваша проблема заключается в следующем…..

Сначала я добавляю дополнительный код в качестве примера….

1. OP касается вертикального расширения, а не горизонтального (которое можно было бы адресовать word-wrap ).

2. developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

3. Я узнал, что это тип сетки кладки. Я изучаю html и просто экспериментирую )))

Ответ №2:

Просто добавьте align-items: start; в контейнер сетки. Помните, что строка все равно остается строкой, так что это даст вам «дыры» в вашем макете.

Если вам нужен макет типа masonry, с которым вы сможете работать 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>

1. Спасибо! и могут ли дивы снизу перемещаться вверх, чтобы покрыть пустое пространство?

2. Это обычно называется макетом кладки. Я добавил информацию и связал очень хорошую статью об этом в своем ответе.

3. Большое спасибо! Я пытаюсь найти эту информацию в течение 5 часов)))

4. Тогда почему вы не выбрали это в качестве ответа и не поддержали его?