Search code examples
csssassgrid-layout

Grid layout with variable height in CSS only

I'm trying to achieve a full-window grid using this kind of layout :

Complex layout

I tried to divide it in smaller parts, but they seem to always overlap. Is this possible using CSS only ?

I'm using Bourbon neat grid (SASS) at the moment.

Edit: Codepen: http://codepen.io/anon/pen/IsCke I made a 3x3 grid for the left slide, and no particular grid for the right side. Everything is fitting in a 5x3 grid.

Obviously I could position everything absolutely but it doesn't feel clean or scalable. The grid is needed for RWD purposes.

Edit 2: For now I've positionned/sized every block with a 4-way absolute position, like this :

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

But I feel frustrated not to be able to do it with a grid.

Solution

  • You could make your own mixins that generates the grid you want

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

    etc.

    You just have to input the top right section the bock is using and if it is large than 1x1 input its dimension. I hope my math is right. I did it in my head.