css - CSS Grid——行高的整数倍

Question

我正在深入研究 CSS 网格，但有一件事我无法理解：

我想要一个网格，n列和每行的高度应该是给定 size 的整数倍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;
}

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

标签： csscss-grid

Answer 1

内容会自动推高行的高度，因此不需要grid-auto-rows. 类似的行为可以通过min-heighton columns 来实现。

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

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