仅在CSS中具有可变高度的网格布局

我正在尝试使用这种布局实现完整的窗口网格：

我试着把它分成更小的部分，但它们似乎总是重叠。这是否可能只使用CSS

我现在正在使用波旁纯网格（SASS）

编辑： 代码笔： 我在左边的幻灯片上画了一个3x3的网格，在右边没有特别的网格。所有部件都适合5x3网格

显然，我可以绝对定位所有东西，但它感觉不干净或不可伸缩。出于RWD目的，需要网格

编辑2： 目前，我已使用4向绝对位置对每个块进行了定位/调整大小，如下所示：

.description {
      position: absolute;
      top: 0%;
      right: 40%;
      bottom: 66.66667%;
      left: 0%;
}

---

但是我对不能用网格来做这件事感到沮丧。

你可以自己制作混音，生成你想要的网格

$cols: 5;
$rows: 3;

@mixin grid($col: 1, $row: 1, $xSize: 1, $ySize: 1) {
     position: absolute;
     display: block;
     top: percentage(($row - 1) / $rows);
     bottom: percentage($row / $rows + ($ySize / $rows));
     left: percentage(($col - 1) / $cols);
     right: percentage($col / $cols + ($xSize / $cols));
}

.first {
     @include grid(1, 1, 3, 1);
}
.topRight {
     @include grid(1, 4, 2, 2);
}
.middleLeft {
     @include grid(1, 2);
}

等等

---

您只需输入bock使用的右上部分，如果它大于1x1，则输入其尺寸。我希望我的数学是正确的。我是在脑子里想出来的。

你能把你以前的方法和我分享一下吗。我几乎都明白了，但我不喜欢我的方法，不知怎么的感觉很“粗糙”。@ayamflow你的方法不粗糙，但高度对重新调整的反应不好。你想实现一个响应性布局还是一个固定布局？流畅的布局，所以所有东西都应该缩放以适应屏幕。很好：）我都是手工完成的，现在一定要用这个混合器！