Как свернуть вертикальное пространство вокруг элементов сетки? - PullRequest
Новая
       11

Как свернуть вертикальное пространство вокруг элементов сетки?

1 голос
/ 01 февраля 2020

С размером экрана> 576px и без изменения HTML, как я могу свернуть элементы div, чтобы элементы div в правом столбце появлялись друг под другом с разницей в 10px grid-row-gap.

Описание, функции и тики-функции имеют динамическое содержимое c. 

.container {
  display: grid;
  grid-row-gap: 10px;
  background: lightgray;
  font-family: sans-serif;
  padding: 0;
}
.container h1, .container div {
  color: white;
  padding: 10px;
  margin: 0;
}
.container h1 {
  background: blue;
}
.container .description {
  background: darkslategray;
}
.container .features {
  background: green;
}
.container .tick-features {
  background: purple;
}
.container .static-map {
  background: maroon;
}
.container .full-width {
  background: darkolivegreen;
}

@media screen and (min-width: 576px) {
  .container {
    grid-template-columns: 50% 1fr;
    grid-template-rows: auto;
    grid-column-gap: 10px;
    max-width: 700px;
  }
  .container h1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  .container .description {
    grid-column: 1/2;
    grid-row: 2/5;
    height: 500px;
  }
  .container .features {
    grid-column: 2 /3;
    grid-row: 2 / 3;
    height: 100px;
  }
  .container .tick-features {
    grid-column: 2 /3;
    grid-row: 3 / 4;
    height: 100px;
  }
  .container .static-map {
    grid-column: 2 /3;
    grid-row: 4 / 5;
  }
  .container .full-width {
    grid-column: 1 / 3;
    grid-row: 5 / 6;
  }
}
<div class="container">
  <h1>HEADER</h1>
  <div class="features">Features</div>
  <div class="description">Description</div>
  <div class="tick-features">Tick features</div>
  <div class="static-map">Static Map</div>
  <div class="full-width">Full width div</div>
</div>

Добавление изображений, показывающих, чего я пытаюсь достичь.

Image 1 - long description

+++

Image 2 - short description - long features

1 Ответ

0 голосов
/ 01 февраля 2020

Проблема

Важно отметить, что ячейки в правом столбце уже расположены рядом друг с другом, разделенные только пробелом в 10 пикселей.

enter image description here

Как видно из пунктирных контуров, между ячейками справа нет широкого вертикального зазора. Они находятся рядом друг с другом.

Проблема в том, что каждый элемент в ячейке имеет высоту ниже, чем строка, в которой он находится. 

  .container .features {
    grid-column: 2 /3;
    grid-row: 2 / 3;
    height: 100px;
  }

  .container .tick-features {
    grid-column: 2 /3;
    grid-row: 3 / 4;
    height: 100px;
  }

Когда для каждого элемента установлено значение height: 100px , он не покрывает всю высоту ячейки, оставляя много пустого пространства.

Решения

В зависимости от того, что именно вам нужно, вы можете подойти к проблеме в различных пути. Вот два:

1. Используйте min-height вместо height

Замените height: 100px на min-height: 100px, позволяя элементам занимать все свободное пространство. (Рассмотрим аналогичный переключатель для элемента .description.) 

.container {
  display: grid;
  grid-row-gap: 10px;
  background: lightgray;
  font-family: sans-serif;
  padding: 0;
}

.container h1,
.container div {
  color: white;
  padding: 10px;
  margin: 0;
}

.container h1 {
  background: blue;
}

.container .description {
  background: darkslategray;
}

.container .features {
  background: green;
}

.container .tick-features {
  background: purple;
}

.container .static-map {
  background: maroon;
}

.container .full-width {
  background: darkolivegreen;
}

@media screen and (min-width: 576px) {
  .container {
    grid-template-columns: 50% 1fr;
    grid-template-rows: auto;
    grid-column-gap: 10px;
    max-width: 700px;
  }

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

  .container .description {
    grid-column: 1/2;
    grid-row: 2/5;
    /* height: 500px; */
    min-height: 500px; /* new */
  }

  .container .features {
    grid-column: 2 /3;
    grid-row: 2 / 3;
    /* height: 100px; */
    min-height: 100px; /* new */
  }

  .container .tick-features {
    grid-column: 2 /3;
    grid-row: 3 / 4;
    /* height: 100px; */
    min-height: 100px; /* new */    
  }

  .container .static-map {
    grid-column: 2 /3;
    grid-row: 4 / 5;
  }

  .container .full-width {
    grid-column: 1 / 3;
    grid-row: 5 / 6;
  }
}
<div class="container">
  <h1>HEADER</h1>
  <div class="features">Features</div>
  <div class="description">Description</div>
  <div class="tick-features">Tick features</div>
  <div class="static-map">Static Map</div>
  <div class="full-width">Full width div</div>
</div>

2. Используйте grid-template-rows

Вы также можете решить проблему на уровне контейнера, используя grid-template-rows. 

.container {
  display: grid;
  grid-row-gap: 10px;
  background: lightgray;
  font-family: sans-serif;
  padding: 0;
}

.container h1,
.container div {
  color: white;
  padding: 10px;
  margin: 0;
}

.container h1 {
  background: blue;
}

.container .description {
  background: darkslategray;
}

.container .features {
  background: green;
}

.container .tick-features {
  background: purple;
}

.container .static-map {
  background: maroon;
}

.container .full-width {
  background: darkolivegreen;
}

@media screen and (min-width: 576px) {
  .container {
    grid-template-columns: 50% 1fr;
    grid-template-rows:  50px minmax(100px, 1fr) minmax(100px, 1fr) 100px 50px;
    grid-column-gap: 10px;
    max-width: 700px;
  }

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

  .container .description {
    grid-column: 1/2;
    grid-row: 2/5;
    /* height: 500px; */
  }

  .container .features {
    grid-column: 2 /3;
    grid-row: 2 / 3;
    /* height: 100px */
  }

  .container .tick-features {
    grid-column: 2 /3;
    grid-row: 3 / 4;
    /* height: 100px; */
  }

  .container .static-map {
    grid-column: 2 /3;
    grid-row: 4 / 5;
  }

  .container .full-width {
    grid-column: 1 / 3;
    grid-row: 5 / 6;
  }
}
<div class="container">
  <h1>HEADER</h1>
  <div class="features">Features</div>
  <div class="description">Description</div>
  <div class="tick-features">Tick features</div>
  <div class="static-map">Static Map</div>
  <div class="full-width">Full width div</div>
</div>
...