CSS Grid——行高的整数倍答案

【问题标题】：CSS Grid—wholenumber multiples for height of rowsCSS Grid——行高的整数倍
【发布时间】：2018-05-24 11:42:13
【问题描述】：

我正在深入研究 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;
}

但这不尊重内容的高度，它会被堆叠。我该如何解决？

【问题讨论】：

只是想知道...对我来说这听起来像是一个奇怪的要求...如果内容仅略高于m - 为什么要设置行高2m？ ...我不认为 CSS 可以处理这个
您的代码示例和堆叠方式的预览将有助于更多地理解您的问题！
餐桌的美好时光又回来了。

标签： css css-grid

【解决方案1】：

内容会自动推高行高，因此不需要grid-auto-rows。类似的行为可以通过min-height 在列上实现。

以下示例显示了这一点。它使用了 css 变量和计算，您可以在此处阅读相关内容

: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>

【讨论】：