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

Question

[Fajamaja]

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

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

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


Я пробовал разобраться самостоятельно - методом тыка. Из этого ничего хорошего не получается.

Comments

[Andrej Sharapov]

может просто медиа-запросами обрезается?

а еще, у вас левая винда, ай яй яй))

[hzzzzl]

Andrej Sharapov, левая это когда такая же, только активирована кейгеном, у него как раз нормальная винда :D

[Andrej Sharapov]

hzzzzl, так то да))

[Владислав Лысков]

это не сетка, эта хрень
PS верстай так, как будто её нет вообще

[Сергей delphinpro]

"Обрезать" допускается только декоративные элементы, но не функциональные.

Answer 1

[Alex P.]

Верстка по сетке пришла в 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) - медиа-функция, которая определяет условие (условия, если их несколько), при выполнении которых применятся описанные в теле медиа-выражения правила.

Comments

[Fajamaja]

Вы вопрос то прочитали?

Answer 2

[Артур К.]

Если погуглить на эту тему, то:

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

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

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

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

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

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

Comments

[Fajamaja]

Вы тоже вопрос не прочитали. Что вообще значит - нормальная сетка? Я обратил внимание, что сегодняшние проекты используют не стандартную колнночную. На сколько я выяснил - это золотое сечение.