Гибкая сетка (Fluid grid). Как вложить сетку в сетку?

Question

[freeman0204]

Есть гибкая сетка, сделал сам с нуля.

.container .cols.col-1 { width: 8.333333333333332%; }
.container .cols.col-2 { width: 16.666666667%; }
.container .cols.col-3 { width: 25%; }
.container .cols.col-4 { width: 33.333333333%; }
.container .cols.col-5 { width: 41.666666667%; }
.container .cols.col-6 { width: 50%; }
.container .cols.col-7 { width: 58.333333333%; }
.container .cols.col-8 { width: 66.666666667%; }
.container .cols.col-9 { width: 75%; }
.container .cols.col-10 { width: 83.333333333%; }
.container .cols.col-11 { width: 91.666666667%; }
.container .cols.col-12 { width: 100%; }

Если блоки идут один за другим горизонтально то не составляет труда написать например такой код:

<div class="cols col-3">Три</div>
<div class="cols col-3">Три</div>
<div class="cols col-3">Три</div>
<div class="cols col-3">Три</div>

Но если блоки расположены во так?

Как тогда разбить сетку? Нужно вкладывать div в div? Как правильно это реализовать? Меня интересует пока именно как самому сделать, без фреймворков, хочу понять суть создания сеток.

Answer 1

[Vitaliy Orlov]

да, можно вкладывать div в div

<div class="row">
    <div class="cols col-1">[1]</div>
    <div class="cols col-11">
        <div class="row">
               <div class="cols col-2">[2]</div>
               <div class="cols col-10">[3]</div>
        </div>
        <div class="row">
               <div class="cols col-8">[4]</div>
               <div class="cols col-4">[5]</div>
        </div>
    </div>
</div>

p.s. .row надо чтобы выровнять высоту, у тебя по-моему это .container

Comments

[freeman0204]

Почему этот div не закрыт " "? Почему для логотипа дана 1 ячейка, а для остального 11? Как я понимаю одна колонка занимает 8.333333333333332%, а по макету там отступ 160px слева от лого и само лого еще 140px, как оно там поместиться? И ничего что я убрал отступы между ячейками, как в бутстрапе например? Это н считается ошибкой? Просто они меня путают, так как в макете есть свои отступы, и тогда стандартные отступы нужно учитывать с теми что в макете.

[Vitaliy Orlov]

Артур Черешнюк: это только пример, чтобы была понятна логика. Кол-во ячеек ты уже выбираешь согласно своего макета. Делать или не делать отступы, это уже на твое усмотрение. Если удобней без них, не делай, но тогда за отступами между элементами тебе придется следить самому.

Answer 2

[freeman0204]

Vitaliy Orlov: Указал outline: 1px solid #3673f6; всем объектам что бы видеть грани. Вот ваш код на скриншоте, все хорошо. Только как мне теперь соединить ячейку 1 (см. скрин)
еще получается если вписать контент в то она будет видна,
что конечно нам не нужно, по этому писать не стоит. Но сетка как я понимаю работает нормально?