Для чего нужны сетки?

Question

[Kostylev2021]

Не могу понять для чего нужны сетки в верстке .
Если сетка делится на двенадцать столбцов и мы хотим что бы ширина элемента была 2,5 столбца мы ведь не можем использовать класс в две ширины или три .И как сетка помогает в мобильной верстке ведь мобильная верстка зависит от дизайна .

Comments

[ThunderCat]

и мы хотим что бы ширина элемента была 2,5 столбца

берется 5 столбцов, и внутри берется 6 из 12. Магия...

Вообще сетки они не обязательно на 12. Просто это наиболее удобное для деления на стандартные блоки число, делится на 2, 3, 4, 6...

[Kostylev2021]

ThunderCat, если взять5 столбцов они ведь будут расстояние занимать например с права если там другие элементы должны быть ?

[Ankhena]

Kostylev2021, сетки в верстке совсем не обязательно значат, что мы весь сайт поделили на 12 колонок (или сколько угодно).
Это слово используется скорее в значении раскладка.

[ThunderCat]

Kostylev2021, разные варианты существуют, в конце концов, если блок не вписывается в сетку его легко можно доколхозить под дизайн, но 99% верстки делается в стандартных пропорциях и готовая сетка сильно упрощает верстку, причем как дизайнеру, так и верстальщику.

Answer 1

[Вадим]

Использование сеток позволяет упростить расположение блоков а так же их адаптив для других размеров экрана.
Если есть сетка - легко перейти к расположению элементов, скажем, от 4 в строке к 2 в строке и на совсем маленьких 1 элемент в строк(то есть там, где на десктопе показывается 4 в строке, на мобильных всё будет в одну колонку)

Как правило, дизайн так же отталкивается о такой же сетки, как и вёрстка, либо одна подстраивается под другую.

Если в дизайне нарисован блок, который имеет дробное значение по занимаемым колонкам, например, 2.5, то тут 2 варианта:
1) Дизайнер не знает\забил на сетку
2) Это намеренное решение.

В любом случае нужно идти к дизайнеру и спросить чё за дела.
В первом случае - пусть исправляет.
Во втором - делаете кастомную вёрстку без сетки.

Наличие сетки, как правило, способствует модульности и сокращает время на вёрстку.
Но уникальный дизайн, или супер пупер дизайнерское решение, аля сайт для awwwwards скорее всего будет без сетки, но не обязательно.