Сетки для всегоили как использовать чужие недостатки
Василий Аксёнов@outring, [email protected]
margin: automin-width: 960px
max-width: 1280px
Нам нужна она
Зачем?
Подробнее о сетках
goo.gl/wKuOМодульные сетки. Алексей Черенкевич
А как же дизайн?
Взаимосвязь сеток
Сетка дизайна
Сетка вёрстки
.prefix-
.suffix-.alfa
.omega
.push-.pull-
IBlockint
Positionint Width
.col-1 .span-5
Взять всё, да и поделить!
5 5 5 5 55 5 5 5 55 5 5 5 55 5 5 5 5
goo.gl/cPgoq
10 %
100
200 %
300 %
padding-right: 90.55%9,45
9,45
18,9 %
28,35 %
Но…
100 %10 %
500 %
600px60px
300px
604px60px
300px
610 px61px
305px
604 px60px
302px
60,4px
БОЛЬШЕ КОЛОНОК!!!!!
50 %
20
40 %
60 %
80 %
100 %
𝑊 𝑔𝑢𝑡𝑡𝑒𝑟𝑙𝑒𝑠𝑠=𝑁 𝑐𝑜𝑛𝑡𝑎𝑖𝑛𝑒𝑟 𝑐𝑜𝑙𝑠
𝑁𝑔𝑟𝑖𝑑 𝑐𝑜𝑙𝑠
×100
𝑊 𝑔𝑢𝑡𝑡𝑒𝑟𝑙𝑒𝑠𝑠=512×100=41,67
𝑊=𝑊 𝑔𝑢𝑡𝑡𝑒𝑟𝑙𝑒𝑠𝑠+𝑊𝑔𝑢𝑡𝑡𝑒𝑟𝑙𝑒𝑠𝑠×𝑊 𝑔𝑢𝑡𝑡𝑒𝑟 (𝑊 𝑐𝑜𝑙)
𝑁𝑔𝑟𝑖𝑑 𝑐𝑜𝑙𝑠
𝑊=41,67+41,67×0,25
12=42,53
width: 20%margin-right: −20%
position: relativeleft: 20%
Результат<div class="g-12">
<div class="g-col-1 g-span-5"></div><div class="g-col-6 g-span-7"></div>
</div>
Универсальныйи быстрый CSS
.container-16 .grid-5
.container-16 .grid-6
.container-16 .grid-7
Независимость блоков
Мультиконфигурационность
Бесконечная вложенность
Восстановление контекста
.g-10 > .g-span-5
.g-10 > .g-span-3 > .g-span-4
.g-restore.g-10
> .g-span-3 > .g-span-4
Вёрстка форм
Label Input
Label Input
Фиксированная сетка
Разбиение по строкам
.g-span-1
.g-span-2.g-row
.g-span-1
.g-span-2
.g-row > .g-span-1 > .g-span-2
.g-row > .g-span-1 > .g-span-2
.g-span-1. g-span-2
. g-span-1.g-first. g-span-2
.g-last?
AnyGrid.net
LESS, Sass, SCSS, Stylus