Мрежово оформление с променлива височина само в CSS

Опитвам се да постигна мрежа с цял прозорец, използвайки този вид оформление:

Комплексно оформление

Опитах се да го разделя на по-малки части, но изглежда винаги се припокриват. Възможно ли е това само с CSS?

В момента използвам Bourbon neat grid (SASS).

Редактиране: Codepen: http://codepen.io/anon/pen/IsCke Направих решетка 3x3 за левия слайд и без специална решетка за дясната страна. Всичко се побира в мрежа 5x3.

Очевидно мога да позиционирам абсолютно всичко, но не се чувства чисто или мащабируемо. Решетката е необходима за целите на RWD.

Редактиране 2: Засега позиционирах/оразмерих всеки блок с 4-посочна абсолютна позиция, като тази:

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

Но се чувствам разочарован, че не мога да го направя с решетка.


css sass grid-layout
person ayamflow    schedule 05.12.2013    source източник
comment
Бихте ли споделили предишния си подход в цигулка?   -  person SquareCat    schedule 05.12.2013
comment
Редактирано в оригиналната публикация с напредъка ми досега. Почти получих всичко, но не харесвам подхода си, усещам се някак хакерско.   -  person ayamflow    schedule 05.12.2013
comment
@ayamflow вашият подход не е хакерски, но височините няма да реагират добре на пренастройка   -  person agconti    schedule 05.12.2013
comment
Искате ли да постигнете адаптивно оформление или фиксирано оформление?   -  person Alex Guerrero    schedule 05.12.2013
comment
Плавно оформление, така че всичко трябва просто да се мащабира, за да пасне на екрана.   -  person ayamflow    schedule 05.12.2013

Отговори (1)


arrow_upward
1
arrow_downward

Можете да направите свои собствени миксини, които генерират мрежата, която искате

$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, въведете нейните размери. Надявам се, че математиката ми е правилна. Направих го наум.

person Jonathon    schedule 09.12.2013
comment
Браво :) Направих всичко на ръка, със сигурност ще използвам този миксин сега! - person ayamflow; 09.12.2013