Как избавиться от пробелов в макете сетки css и разместить элементы вместе один за другим

Question

Я пытаюсь понять, как размещать элементы, используя display: grid, без явного указания высоты элементов. Это полезно, например, если у вас есть только несколько элементов, и вы хотите сложить их один за другим в заданном порядке, но не учитывая высоту.

Итак, дано определенное количество элементов с одинаковой шириной, но разной высотой. Как вы можете разместить их вместе в заданном порядке с чистым css таким образом, чтобы между ними не было места. Это пример:

.container {
  width: 505px;
  border: solid red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "b1 b2" "b1 b3" "b1 b4" "b1 b6" "b5 b6"
}

.box {
  border: solid 1px;
  width: 250px;
}

.box1 {
  height: 1000px;
  background-color: yellow;
  grid-area: b1;
}

.box2 {
  height: 200px;
  background-color: blue;
  grid-area: b2;
}

.box3 {
  height: 250px;
  background-color: green;
  grid-area: b3;
}

.box4 {
  height: 250px;
  background-color: orange;
  grid-area: b4;
}

.box5 {
  height: 600px;
  grid-area: b5;
  background-color: purple;
}

.box6 {
  height: 400px;
  background-color: gray;
  grid-area: b6;
}

<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
  <div class="box box6">6</div>
</div>

Answer 1

Вы должны использовать поддельный контент при тестировании макета, , если ваша фиксированная высота не может совпадать вместе (левый столбец - box1 + box5 = 1600 пикселей, а столбец справа - 1300 пикселей, поэтому промежуток в 300 пикселей) / difference) : Пустое пространство здесь из-за произвольной высоты, присвоенной детям. Ваша сетка работает нормально и плавно:

Советы : для тестирования используйте min-height для дочерних элементов или контейнера, иначе используйте поддельное содержимое / htmlIpsum .

Ваш код с min-height только для родительского элемента

.container {
  min-height:80vh;/* demo purpose*/
  width: 505px;
  border: solid red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "b1 b2" "b1 b3" "b1 b4" "b1 b6" "b5 b6"
}

.box {
  border: solid 1px;
  width: 250px;
}

.box1 {

  background-color: yellow;
  grid-area: b1;
}

.box2 {

  background-color: blue;
  grid-area: b2;
}

.box3 {

  background-color: green;
  grid-area: b3;
}

.box4 {

  background-color: orange;
  grid-area: b4;
}

.box5 {

  grid-area: b5;
  background-color: purple;
}

.box6 {

  background-color: gray;
  grid-area: b6;
}

<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
  <div class="box box6">6</div>
</div>

min-height вместо height для детей:

.container {
  width: 505px;
  border: solid red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "b1 b2" "b1 b3" "b1 b4" "b1 b6" "b5 b6"
}

.box {
  border: solid 1px;
  width: 250px;
}

.box1 {
  min-height: 1000px;
  background-color: yellow;
  grid-area: b1;
}

.box2 {
  min-height: 200px;
  background-color: blue;
  grid-area: b2;
}

.box3 {
  min-height: 250px;
  background-color: green;
  grid-area: b3;
}

.box4 {
  min-height: 250px;
  background-color: orange;
  grid-area: b4;
}

.box5 {
  min-height: 600px;
  grid-area: b5;
  background-color: purple;
}

.box6 {
  min-height: 400px;
  background-color: gray;
  grid-area: b6;
}

<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
  <div class="box box6">6</div>
</div>

Answer 2

Если вы хотите сохранить заданную высоту, вы можете обернуть столбец 2 divs в оболочку flex:

<div class="container">
  <div class="box box1">1</div>
  <div class="box box5">5</div>
 <div class = "flex">
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box6">6</div>
   </div>
</div>

А затем изменить grid CSS бит на разместить:

.container {
  width: 505px;
  border: solid red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "b1 b3" "b5 b3";
}

Теперь единственные поля, которым требуется grid-area, - это 2 слева (b1 и b5) и flex оболочка (b3 в моем коде):

.box {
  border: solid 1px;
  width: 250px;
}

.box1 {
  height: 1000px;
  background-color: yellow;
  grid-area: b1;
}

.box2 {
  height: 200px;
  background-color: blue;
}

.box3 {
  height: 250px;
  background-color: green;
  grid-area: b3;
}

.box4 {
  height: 250px;
  background-color: orange;
}

.box5 {
  height: 600px;
  grid-area: b5;
  background-color: purple;
}

.box6 {
  height: 400px;
  background-color: gray;
}

.flex {
  display: flex;
  flex-direction: column;
  grid-area: b3;
}

Посмотрите эту демонстрацию JSfiddle