Сетки для всего или как использовать чужие недостатки...
description
Transcript of Сетки для всего или как использовать чужие недостатки...
![Page 2: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/2.jpg)
![Page 3: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/3.jpg)
margin: automin-width: 960px
max-width: 1280px
![Page 4: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/4.jpg)
![Page 5: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/5.jpg)
![Page 6: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/6.jpg)
![Page 7: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/7.jpg)
![Page 8: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/8.jpg)
Нам нужна она
![Page 9: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/9.jpg)
Зачем?
![Page 10: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/10.jpg)
![Page 11: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/11.jpg)
![Page 12: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/12.jpg)
![Page 13: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/13.jpg)
![Page 14: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/14.jpg)
![Page 15: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/15.jpg)
![Page 16: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/16.jpg)
![Page 17: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/17.jpg)
Подробнее о сетках
goo.gl/wKuOМодульные сетки. Алексей Черенкевич
![Page 18: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/18.jpg)
А как же дизайн?
![Page 19: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/19.jpg)
Взаимосвязь сеток
Сетка дизайна
Сетка вёрстки
![Page 20: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/20.jpg)
![Page 21: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/21.jpg)
![Page 22: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/22.jpg)
.prefix-
.suffix-.alfa
.omega
.push-.pull-
![Page 23: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/23.jpg)
IBlockint
Positionint Width
![Page 24: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/24.jpg)
.col-1 .span-5
![Page 25: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/25.jpg)
![Page 26: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/26.jpg)
![Page 27: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/27.jpg)
![Page 28: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/28.jpg)
Взять всё, да и поделить!
![Page 29: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/29.jpg)
5 5 5 5 55 5 5 5 55 5 5 5 55 5 5 5 5
![Page 30: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/30.jpg)
![Page 31: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/31.jpg)
![Page 32: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/32.jpg)
![Page 33: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/33.jpg)
goo.gl/cPgoq
![Page 34: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/34.jpg)
10 %
100
200 %
300 %
![Page 35: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/35.jpg)
padding-right: 90.55%9,45
9,45
18,9 %
28,35 %
![Page 36: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/36.jpg)
Но…
![Page 37: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/37.jpg)
100 %10 %
500 %
![Page 38: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/38.jpg)
600px60px
300px
![Page 39: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/39.jpg)
604px60px
300px
![Page 40: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/40.jpg)
610 px61px
305px
![Page 41: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/41.jpg)
604 px60px
302px
60,4px
![Page 42: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/42.jpg)
БОЛЬШЕ КОЛОНОК!!!!!
![Page 43: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/43.jpg)
50 %
20
40 %
60 %
80 %
100 %
![Page 44: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/44.jpg)
𝑊 𝑔𝑢𝑡𝑡𝑒𝑟𝑙𝑒𝑠𝑠=𝑁 𝑐𝑜𝑛𝑡𝑎𝑖𝑛𝑒𝑟 𝑐𝑜𝑙𝑠
𝑁𝑔𝑟𝑖𝑑 𝑐𝑜𝑙𝑠
×100
![Page 45: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/45.jpg)
𝑊 𝑔𝑢𝑡𝑡𝑒𝑟𝑙𝑒𝑠𝑠=512×100=41,67
![Page 46: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/46.jpg)
![Page 47: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/47.jpg)
![Page 48: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/48.jpg)
![Page 49: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/49.jpg)
𝑊=𝑊 𝑔𝑢𝑡𝑡𝑒𝑟𝑙𝑒𝑠𝑠+𝑊𝑔𝑢𝑡𝑡𝑒𝑟𝑙𝑒𝑠𝑠×𝑊 𝑔𝑢𝑡𝑡𝑒𝑟 (𝑊 𝑐𝑜𝑙)
𝑁𝑔𝑟𝑖𝑑 𝑐𝑜𝑙𝑠
![Page 50: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/50.jpg)
𝑊=41,67+41,67×0,25
12=42,53
![Page 51: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/51.jpg)
![Page 52: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/52.jpg)
width: 20%margin-right: −20%
![Page 53: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/53.jpg)
position: relativeleft: 20%
![Page 54: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/54.jpg)
Результат<div class="g-12">
<div class="g-col-1 g-span-5"></div><div class="g-col-6 g-span-7"></div>
</div>
![Page 55: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/55.jpg)
Универсальныйи быстрый CSS
![Page 56: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/56.jpg)
.container-16 .grid-5
.container-16 .grid-6
.container-16 .grid-7
![Page 57: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/57.jpg)
Независимость блоков
![Page 58: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/58.jpg)
![Page 59: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/59.jpg)
Мультиконфигурационность
![Page 60: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/60.jpg)
![Page 61: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/61.jpg)
Бесконечная вложенность
![Page 62: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/62.jpg)
![Page 63: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/63.jpg)
Восстановление контекста
![Page 64: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/64.jpg)
![Page 65: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/65.jpg)
.g-10 > .g-span-5
![Page 66: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/66.jpg)
![Page 67: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/67.jpg)
.g-10 > .g-span-3 > .g-span-4
![Page 68: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/68.jpg)
![Page 69: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/69.jpg)
.g-restore.g-10
> .g-span-3 > .g-span-4
![Page 70: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/70.jpg)
![Page 71: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/71.jpg)
Вёрстка форм
![Page 72: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/72.jpg)
Label Input
![Page 73: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/73.jpg)
Label Input
![Page 74: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/74.jpg)
![Page 75: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/75.jpg)
Фиксированная сетка
![Page 76: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/76.jpg)
Разбиение по строкам
![Page 77: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/77.jpg)
.g-span-1
.g-span-2.g-row
.g-span-1
.g-span-2
![Page 78: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/78.jpg)
.g-row > .g-span-1 > .g-span-2
.g-row > .g-span-1 > .g-span-2
![Page 79: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/79.jpg)
.g-span-1. g-span-2
. g-span-1.g-first. g-span-2
![Page 80: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/80.jpg)
.g-last?
![Page 82: Сетки для всего или как использовать чужие недостатки (Василий Аксенов)](https://reader037.fdocuments.net/reader037/viewer/2022102716/5495ebb5b47959c07a8b456b/html5/thumbnails/82.jpg)
LESS, Sass, SCSS, Stylus