Как правильно создать адаптивную сетку?

Question

[Александр Ф]

День добрый. В настоящее время разбираюсь с основами создания сайтов, и сейчас возник следующий вопрос. Как правильно создать свою адаптивную сетку для разработки прототипа шаблона и последующей его верстки? Понимаю, что существует множество готовых css фреймворков и библиотек, представляющих отличные сетки. Однако, сейчас хочу именно разобраться с основами самостоятельно, а не бездумно использовать готовые решения. Считаю, что с этим мне помогут ответы на следующие вопросы:
1. Какой размер или размер какого элемента принимать за минимальный?
2. Через какие breakpoint'ы управлять адаптивностью?
3. Какое количество колонок использовать для каждого breakpoint?
4. Относительно чего рассчитывать ширину колонки, отступы между ними, и высоту строк?
5. И считаю самый главный вопрос, что именно почитать? Какие есть основные книги по использованию сеток в веб?

Answer 1

[Егор Огурцов]

А ты не используй бездумно, а возьми тот же bootstrap, разберись в нем (там все очень просто, на самом деле), и посмотри как там реализованы сетка, размеры, и брейкпоинты. Там найдешь ответы на первые три вопроса.

4. Это уже, скорее всего, больше типографика.
5. Grid Layout in CSS: Interface Layout for the Web, Building Responsive Data Visualization for the Web

Comments

[Anton]

Егор, вопрос к тебе как к фронтендеру, как поступать в случаях когда внутри каждого блока сетки, размер информации отличается? Есть ли какое то стандартное решение? Возможно вы знаете что прочитать что бы раз и навсегда усвоить, как решать данные проблемы.

Приведу пример: https://codepen.io/anseme/pen/MdEobL

Уменьши экран до 900px

[Егор Огурцов]

An Sem, раз и навсегда подобные проблемы решает flexbox, к слову - на нем работает bootstrap v4. Если ты дорабатываешь старый проект - попробуй этот плагин, а если пишешь с нуля - не используй прошлый век, в виде третьего бутстрапа.

Answer 2

[Денис Букреев]

Минимальный - 1px
Через любые: верстка может сломаться на любом разрешении
Такое, какое по дизайну
Относительно дизайна
Читай дизайн

Почему так?
Да потому что даже самые профессиональные дизайны, которые мне попадались, имели эту сетку и дизайнер даже половину элементов не укладывал в нее, потому что это нереально.
Сетки это бред, не знаю от чего они так подхвачены всеми.
Ни разу еще ничего не удавалось идеально по сетке сделать, потому что, повторюсь, это бред.

От того и бустсрам я считаю калом. Его максимум где можно применить - когда у сайта сначала создается движок, а потом уже ставится дизайн. Т.е. он нужен программистам, чтобы было проще работать, когда нет верстки.

Я все эти сетки игнорирую и делаю так, как будет оптимальнее по дизайну. Так и при создании адаптивности намного меньше ломается и удается обойтись основными точками: 960, 800, 768, 640, 540, 480, 320 (редко приходится добавлять промежуточные, часто удается игнорировать такие как 768 и 480)

Comments

[Алекс Глебов]

Вот у меня сейчас так процесс работы построен. Разработчики развертывают cms под проект, там нет верстки, поэтому юзают бутстрап. Там чуть ли не все компоненты бутстрапа используются, от типографики до js плагинов. А я привожу все это к макету.. вот это гемор тот еще.
Обычно я выбрасываю классы сетки бутстрапа и делаю адаптив на флексах. В других компонентах через sass правлю стили..
Посоветуете что тут можно изменить?
Альтернативу бутстрапу смысла, наверное, нет искать, может свой какой-то мини фреймворк запилить со временем..
Или привыкать к бутстрапу? т.к. есть еще вопрос включения в работу с cms новых верстальщиков.

[Денис Букреев]

Алекс Глебов: я сначала верстаю отдельно все, потом уже соединяю с движком (бустсрам там или нет - неважно, все срезаю подчистую). Не сильно и геморно, особенно если платют хорошо за часы.

А для верстки у меня заготовлено нечто похожее на фреймворк (или ui-интерфейс).
Набор стилей и скриптов с кнопочками, списками, стилями текстов - при начале верстке только стили меняй и все.
Но сеток никаких нет у меня, не вижу в них смысла. Единственная сетка - центральный блок с шапкой и футером.
Вот пример: iprom.bookreev.com/ui.php и iprom.bookreev.com/styles.php
Такую хрень всегда поставляю со всей версткой, иногда комментами приправляю, если что-то сложное.

Сесть и запилить, чтобы было - никогда не получалось, постоянно с каждым новым проектом что-то новое добавляю и все.

Answer 3

[Александр Ружевич]

Вам правильно пишут, но раз хотите самостоятельно, то можете сделать через медиа запросы всю верстку самостоятельно, принцип не сложный, в зависимости от разрешения экрана пользователя изменять размеры элементов, шрифтов, скрывать ненужные элементы или показывать их на определенном разрешении, затем если нужно будет редактировать верстку на хосте будете проклинать все на свете в поиске нужных классов для каждого разрешения. В итоге поймете как все работает и запомните этот ад надолго) После этого трижды мысленно будете благодарить создателей фреймворков ибо работу они делают огромную) Но если хотите сами знать как работает адаптивная верстка то медиа запросы самый верный способ

Answer 4

[Александр Аблизин]

У меня была схожая задача, я возможно пошёл по неправильному пути но суть и механику сетки я просто подсмотрел исследуя страницу примера getbootstrap.com/examples/grid в дебагере хрома. Бутсрап использует 12-сетку и мне кажется она самая оптимальная.