Расстояние между рядами шире, чем предполагалось - PullRequest
Новая
       9

Расстояние между рядами шире, чем предполагалось

0 голосов
/ 24 мая 2018

У меня есть сетка (дисплей: сетка), которая имеет 4 ячейки в ширину.Когда есть только два ряда, расстояние между ними больше, чем должно быть.Если есть три или более строк, все выглядит так, как должно.Вот как выглядит HTML: 

<div class="thumbnail-container">
  <div class="thumbnail-grid">
     <div class="thumbnail-grid-cell"></div>
     <div class="thumbnail-grid-cell"></div>
     <div class="thumbnail-grid-cell"></div>
     <!-- and so on... -->
  </div>
</div>

Вот мои правила CSS: 

.thumbnail-container {
    overflow: scroll;
}

.thumbnail-grid {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-row-gap: 5px;
    grid-column-gap: 5px;
    height: 250px;
    margin: 8px;
}

.thumbnail-grid-cell {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    position: relative;
}

Просто чтобы уточнить:

Вот как это выглядит2 строки:

grid with 2 rows

Вот как это выглядит с 3 строками:

grid with 3 rows

Интервал между столбцами всегда корректен.

Ответы [ 2 ]

0 голосов
/ 24 мая 2018

Трудно найти решение здесь, потому что не хватает данных, чтобы воспроизвести проблему.Но вот что это может быть:

Поскольку вы не определили явным образом ни одной строки в сетке, строки добавляются неявно, а их высоты по умолчанию установлены на grid-auto-rows: auto.

Значения auto и 1fr растянутся, чтобы занять пустое место в контейнере.

Таким образом, разрыв, который вы видите на своем изображении № 1, равен , а не разрыв между строками.

grid with 2 rows

Фактический разрыв междуколичество строк равно 5 пикселям, как установлено правилом grid-row-gap.

Между строками возникает разрыв , поскольку элементы сетки не заполняют высоту строки.

Посмотрите на это так:

  • Есть две строки.
  • Контейнер установлен в height: 250px.
  • Строки разделяютсявысота в равной степени, поэтому каждая строка имеет высоту 122,5 пикселя (после вычитания разрыва строки сетки 5px).
  • Но элементы внутри этих строк установлены на height: 100px.
  • Так что естьРазрыв в 22,5 пикселя между нижним краем элементов и нижним краем строки.

Если у вас есть три строки, это свободное пространство необходимо, и строки закрываются.

Вот три возможных решения:

  1. Вместо auto или fr, попробуйте grid-auto-rows: min-content
  2. Удалите height: 250px на контейнере;это устанавливает высоту контейнера в высоту содержимого (т. е. height: auto)
  3. Добавьте align-content: start в контейнер

Для получения дополнительной информации см. эти сообщения:

0 голосов
/ 24 мая 2018 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.thumbnail-grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
  margin: 8px;
  background: lightblue;
}

.thumbnail-grid-cell {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: relative;
}
<div class="thumbnail-container">
  <div class="thumbnail-grid">
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
  </div>
</div>

<div class="thumbnail-container">
  <div class="thumbnail-grid">
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
  </div>
</div>

<div class="thumbnail-container">
  <div class="thumbnail-grid">
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
  </div>
</div>
...