Какие актуальные размеры сеток для дизайна?

Question

[KingAnton]

Иногда верстаю макеты фигма от разных дизайнеров и заметил интересную тенденцию, если раньше ширина контейнера была в пределах ~1200px которая захватывала все ноуты и десктопы, то сейчас пошла какая-то вакханалия. Понятно, что большинство мониторов сейчас минимум 1920px по ширине, но есть ощущение, что дизайнеры берут ширину контейнера наобум 1480px/1536px/1763px и т.п.

Есть ли сейчас какие-то общепринятые параметры в плане ширины контейнера, размера сеток, которыми руководствуются хорошие дизайнеры?

Comments

[Ankhena]

ширина контейнера была в пределах ~1200px

Это очень "раньше".

Какая разница какие именно числа выбрал дизайнер? Какие выбрал, так и верстайте.
Вероятно, это точки слома конкретного дизайна.
Всё чаще встречаю дизайнеров, полюбивших гладкие зависимости от размера вьюпорта или контейнера. На языке CSS это единицы vw или cqw и т.д. и функции типа clamp, min, max.
Может, это связано с изменениями в Фигме, им стало легче это рисовать.

Общепринятые можно посмотреть в популярных фреймворках, например, в бутстрапе.

[Adamos]

Понятно, что большинство мониторов сейчас минимум 1920px по ширине

значения:
среднесуточные 	ноябрь 2025 г. 	октябрь 2025 г. 	за 3 месяца
	1024x768 	339	40.8% 	330	40.7% 	318	40.1%
	800x600 	136	16.4% 	129	16.0% 	129	16.4%
	1920x1080 	111	13.4% 	113	14.0% 	109	13.9%
	1600x1200 	81	9.8% 	72	8.9% 	75	9.5%
	1366x768 	67	8.1% 	67	8.4% 	64	8.2%
	1280x1024 	25	3.1% 	22	2.7% 	22	2.9%
	1280x800 	21	2.6% 	22	2.8% 	21	2.7%
	1440x900 	13	1.6% 	15	1.8% 	13	1.7%
	1152x864 	13	1.6% 	13	1.6% 	13	1.6%
	Другие 	9.2	1.1% 	12	1.4% 	10	1.3%
	сумма выбранных 	737	88.5% 	714	88.0% 	697	88.0%

При том, что

значения:
среднесуточные 	ноябрь 2025 г. 	октябрь 2025 г. 	за 3 месяца
	Android 	394	47.4% 	380	46.9% 	368	46.6%
	Windows 10 	311	37.4% 	304	37.5% 	297	37.6%
	iOS iPhone 	84	10.2% 	83	10.3% 	82	10.5%
	Windows 7 	18	2.2% 	19	2.4% 	18	2.3%
	MacOS 	7.7	0.9% 	7.5	0.9% 	7.1	0.9%

[Павел]

Adamos, Очень странная статистика, сайт для планшетов с блокированием мобильных устройств?
Вот золотой стандарт, приблизительно такая картинка на 10+ проектах.

[KingAnton]

У меня +/- так же на некоторых проектах. По сути в идеале, чтобы десктоп версия захватывала старые ноуты, 1366px, например в том же бутстрап 5 самое большое значение по ширине 1320px и думаю на это и стоит ориентироваться

Answer 1

[Михаил Лялин]

верстайте "как есть", но с учётом мобильных и прочих девайсов

Answer 2

[alexalexes]

Берете сетку последней версии бутстрапа и пытаетесь верстать под все реперные ширины сетки (колонки бутстраповские брать не обязательно, главное, знать, какие значения with нужны для медиа-запросов).
Если какой-то элемент макета конфликтует по габаритам или непонятно, куда его переносить, схопывать, замещать, то задаете дополнительные вопросы дизайнеру под каждую возникшую проблему.
PS: Желательно, иметь 2 макета - для мобильной версии, <576px и для какого-нибудь среднего размера, типа ≥1200px. Тогда меньше всего возникают вопросы к дизайнеру, как проводить метаморфозы элементов в промежуточных состояниях сетки.

Answer 3

[Семён Федосеев]

Актуальная сетка для современного css фреймворка: https://tailwind-react-components.vercel.app/docs/... Tailwind.
Она отличается от Bootstrap. Сделайте по любой сетке, у которой есть документация. Это как выбор лучшего фреймворка или библиотеки, правильного ответа нет.