CSS Grid - целое число, кратное высоте строк

Question

Я погружаюсь в CSS-гриды, и есть одна вещь, которую я не могу понять:

Я хочу иметь сетку с n столбцами, а высота каждой строки должна быть целой.число, кратное данному размеру m, в зависимости от содержимого ячеек.

Рассмотрим следующий пример, X обозначает содержимое

    1      2      3
+------+------+------+
|   X  |   X  |      |<-m
-   X  -      -      -  
|      |      |      |
+------+------+------+

Таким образом, содержимое ячейки 1 /1 немного выше, чем m, поэтому весь ряд должен иметь высоту 2 * m, и так далее для роста высоты.

Прямо сейчас я здесь:

@mixin grid-container($cols: 6, $col-gap: 20px, $row-gap: 12px)
{
  display: grid;
  grid-template-columns: repeat($cols, 1fr);
  grid-auto-rows: 6*$row-gap;
  grid-column-gap: $col-gap;
  grid-row-gap: $row-gap;
}

Но это такне соблюдайте высоту содержимого, и оно складывается.Как я могу это исправить?

Answer 1

Контент автоматически увеличивает высоту строки и, следовательно, не нуждается в grid-auto-rows.Аналогичное поведение может быть достигнуто с помощью min-height в столбцах.

В следующем примере это показано.Здесь использовались переменные css и calc, о которых вы можете прочитать здесь

• https://time2hack.com/2018/04/postcss-cssnext-turbocharge-css-development/
• https://time2hack.com/2018/03/postcss-css-preprocessor-in-javascript/

:root {
    --row-gap: 12px;
    --col-gap: 20px;
    --col-count: 6;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--col-count), 1fr);
  grid-column-gap: var(--col-gap);
  grid-row-gap: var(--row-gap);
}
.col {
  border: 1px solid #eee;
  padding: 5px;
  box-sizing: border-box;
  min-height: calc(var(--col-count) * var(--row-gap))
}

<div class="grid-container">

    <div class="col">A<br/>B<br/>A<br/>B<br/>A<br/>B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col">E</div>
    <div class="col">F</div>
    <div class="col">-</div>

    <div class="col">A<br/>B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col">T<br/>D</div>

</div>