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

Question

我正在尝试使用这种布局实现全窗口网格:

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

我目前正在使用 Bourbon neat grid (SASS)。

编辑:代码笔:http://codepen.io/anon/pen/IsCke我为左侧幻灯片制作了一个 3x3 的网格，而右侧没有特定的网格。一切都适合 5x3 网格。

显然，我可以绝对定位所有内容，但感觉不干净或可扩展。 RWD 需要网格。

编辑 2:现在我已经用 4 向绝对位置定位/调整了每个 block ，如下所示:

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

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

Answer 1

您可以制作自己的 mixins 来生成您想要的网格

$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);
}

等等

您只需输入方 block 正在使用的右上角部分，如果它大于 1x1，则输入其尺寸。我希望我的数学是正确的。我在脑海中做到了。