Что такая за сетка и с чем ее есть?

Доброго времени суток, коллеги!

Часто в кейсах вижу сетку подобного вида. Как я понял, принцип построения сетки, обусловлен "добавлением" части экрана в зависимости от его размера. На пример, если экран 1360 пикс, то все элементы макета находящиеся за пределами контейнера обрезаются.

Скажите, где можно почитать о ней подробнее. Возможно, есть видео мастер-классов, где показана работа с сеткой на примере. Спасибо!
5d08d888d55ff163871831.png

Я пробовал разобраться самостоятельно - методом тыка. Из этого ничего хорошего не получается.
  • Вопрос задан
  • 563 просмотра
Пригласить эксперта
Ответы на вопрос 2
@AlexPope
UI developer
Верстка по сетке пришла в web из полиграфического дизайна. Посмотрите на газеты - все уважающие себя издания сверстаны с использованием сетки. Логотипы, изображения, текст располагается в колонках. Главное в сетке - понятие колонки (редко используются строки), их может быть сколько захотите, самые популярные - 12 и 24 колонки. Потому что эти числа имеют наибольшее кол-во делителей. Зачем это нужно? Одна колонка - это расчетная единица. Посмотрите макет (12-ти колоночный) - логотип занимает 2 колонки, текст слайдера - 4 колонки, изображение слайдера - 6 колонок, каждый блок в секции услуг - 4 колонки. И так далее...То есть 12 легко делится на 1, 2, 3, 4, 6, 12. Разделяет колонки т.н. gutter (англ. - желоб).
Такой подход позволяет осуществлять компоновку блоков на странице, удобную для визуального восприятия, а также перекомпоновку блоков, если делается адаптивная верстка. То есть, общее число колонок сохраняется, только занимать каждый блок уже может другое кол-во колонок, или вовсе исчезнуть на каком-то экране.
Едят это в основном с использованием MediaQueries (Медиа-запросов или медиа-выражений), являющих частью спецификации Css, вида:
`@media (min-width: 768px) { /* Ваш блок Css-кода */ }, где
`@media - @-правило,
(min-width: 768px) - медиа-функция, которая определяет условие (условия, если их несколько), при выполнении которых применятся описанные в теле медиа-выражения правила.
5d189a4f23284820386203.jpeg
Ответ написан
amark
@amark
rush less, feel more
Если погуглить на эту тему, то:
Система сетки используется для вывода элементов на одни и те же вертикальные линии. Это дает вашему макету лучший внешний вид, потому что все текст/заголовки/изображения выравниваются по горизонтали одинаково.


При использовании сетки получается, во-первых, упорядочить элементы в "систему", что в умелых руках дает "композицию"/порядок, а, в-вторых, такой макет потом будет проще верстать с использованием фреймворков.

Начните изучение с одной из сеток-первооткрывателей по запросу "960 px".
Вот тут тоже пример пояснения на эту тему.

Как я понял, принцип построения сетки, обусловлен "добавлением" части экрана в зависимости от его размера.

все элементы макета находящиеся за пределами контейнера обрезаются

– это, кстати, не совсем верно. В "нормальной" сетке ничего не обрезается. Скорее меняется по заранее прогнозированным сценариям. Грубо говоря (очень грубо) у вас есть несколько макетов под маленькие, большие, средние размеры окна. И сетка позволяет вам в этом всём соблюдать ритм и порядок.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы