Модульная CSS сетка. Построение

Введение

Это вторая часть статьи по построению модульной CSS сетки. Если так получилось, что вы не читали первую часть, то самое время сделать это. Кстати, она находится тут.

CSS Сетка

Как и в примерах первой части, мы будем использовать принцип сначала мобильные, то есть:

Сначала зададим стили по умолчанию для мобильных устройств.
Выберем точки (breakpoint), с помощью которых будем управлять сеткой.
На основе этих точек (breakpoint) будем работать с сеткой по мере увеличения разрешения.

Итак, наш план на сегодня:

Выбираем контрольные точки.
На основе этих точек размышляем о ширине контейнера.
Создаём область видимости наших столбцов.

Как говорится:

Yeah, piece o' cake! Let's rock! — Duke Nukem

Контрольные точки

Если у вас есть дизайн, то тут просто: берём ширину каждого макета по очереди (мобильная, планшетная и т. д. версии) и вот вам контрольные точки.

Однако, допустим, у нас нет макета или он подразумевает только одну версию - полноразмерную. В таком случае нужно отталкиваться от параметров и характеристик основных потребителей контента: телефонов, планшетов, ноутбуков и стационарных персональных компьютеров.

Нетривиальная задача, да?

Всё решаемо! Тем более, в подготовленном материале. Да, да, тут всё серьёзно.

Проследить за тенденциями на мобильном рынке очень просто. Открываем Яндекс.Маркет. Смотрим последние две версии телефона от яблочной компании, потом сортируем выдачу по популярности и отслеживаем разрешение других популярных экранов. То же самое проделываем и с планшетами.

В итоге у вас получится некоторый список разрешений, например, у меня получился такой:

1536x2048
1440x2560
1080x1920
768x1024
600x1024
720x1280
640x1136
640x960
540x960
480x800

Анализируем полученные результаты и получаем две отправные точки, так как мобильные операционные системы обычно делят своё физическое разрешение на два:

768x1024
540x960

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

Тем не менее, это не конечная остановка в поисках, так как Steam - это игровая платформа, а у геймеров дела несколько лучше, чем у офисных... ммм-м... пользователей.

Поэтому, нужно просматривать и другие сайты, предоставляющие такую информацию:

На данных момент, получаем следующую картину, с учётом уже выбранных мобильных разрешений:

1920x1080
1366x768
1024x768
768x1024
540x960

Можно сразу вычеркнуть разрешение 1920x1080, так как сайт разработанный для 1366px будет отлично смотреться и на более высоком разрешении. Это предположение основано на том, что вряд ли дизайн будет резко меняться после достижения ширины окна в 1366px.

Конечного результата нет и не может быть. Он свой у каждого проекта, в зависимости от дизайна и идей. Поэтому вам придётся самим решать какие точки брать для своей сетки.

Например, статистика этого блога следующая:

Наиболее верный и, по совместительству, путь с наименьшим сопротивлением - обращение к Bootstrap. Это самый популярный и продуманный фреймворк, существующий сейчас. Есть и лучше, но этот самый популярный.

За вас уже вычислили основные точки, которые сейчас имеют значения:

768px
992px
1200px

Идеально! Теперь необходимо задать контейнер для наших плавающих столбцов.

Контейнер и строка

Первым делом нам нужен контейнер (container) и строка (row), который будет содержать плавающие столбцы.

Назовём класс контейнера - .area (от англ. area - область, участок). Вы также можете использовать более очевидное имя, например .container, но мне больше нравится первый вариант, так как он звучит лучше, да и короче. Пропишем первые свойства:

/* Container */
.area {
    margin-left: auto;
    margin-right: auto;
}

С помощью автоматических отступов мы центрируем элемент.

Теперь необходимо задать ширину этой области. Вот теперь в работу вступают наши любимые медиа-запросы. При этом мы не будем рассчитывать эту ширину, так как это сугубо личное значение. Поэтому вновь обратимся к Bootstrap.

Исходя из полученных размеров и контрольных точек, получаем следующие медиа-запросы:

/* Media queries */
@media (min-width: 768px) {
    .area { width: 750px; }
}
@media (min-width: 992px) {
    .area { width: 970px; }
}
@media (min-width: 1200px) {
    .area { width: 1170px; }
}

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

Применим уже известную нам технику в классе row.

/* Row */
.row:before,
.row:after {
    content: " ";
    display: table;
}
.row:after {
    clear: both;
}

Отлично! Подготовительный этап завершён. Приступаем к самому интересному - плавающим столбцам.

Плавающие столбцы

Теория

Суть всего этого безобразия - изменение размеров элемента, в зависимости от ширины окна браузера.

Сетка будет содержать 12-ть колонок, так как это количество столбцов, в основном, покрывает все потребности верстальщиков. Однако, вам ничего не стоит расширить её до 24-х столбцов и более.

Ширина столбцов будет рассчитываться по следующей формуле:

100% / количество столбцов * номер столбца

Для примера, если число столбцов равно 12-ти.

100% / 12 * 12 = 8.33333333% * 12 = 100%
100% / 12 * 7 = 8.33333333% * 7 = 58.33333333%
100% / 12 * 2 = 8.33333333% * 2 = 16.66666667%

Внимание!
Использование процентов — не панацея. Вместо них, можно использовать em или rem, но не px, так как значения не всегда будут целыми. Вы можете собственноручно округлять получающиеся значения в пикселях, либо с помощью используемого препроцессора.

Думаю, что общую логику вы уловили.

Помните мы обсуждали принцип сначала мобильные? - Самое время его применить.

У нас будут общие, для устройств не попадающих ни под один медиа-запрос, и такие же стили для каждого последующего медиа-запроса.

Общие стили
col-12: 100% / 12 * 12 = 8.33333333% * 12 = 100%
col-7: 100% / 12 * 7 = 8.33333333% * 7 = 58.33333333%
col-2: 100% / 12 * 2 = 8.33333333% * 2 = 16.66666667%

Стили для разрешения больше 768px
col-12: 100% / 12 * 12 = 8.33333333% * 12 = 100%
col-7: 100% / 12 * 7 = 8.33333333% * 7 = 58.33333333%
col-2: 100% / 12 * 2 = 8.33333333% * 2 = 16.66666667%

Стили для разрешения больше 992px
col-12: 100% / 12 * 12 = 8.33333333% * 12 = 100%
col-7: 100% / 12 * 7 = 8.33333333% * 7 = 58.33333333%
col-2: 100% / 12 * 2 = 8.33333333% * 2 = 16.66666667%

Стили для разрешения больше 1200px
col-12: 100% / 12 * 12 = 8.33333333% * 12 = 100%
col-7: 100% / 12 * 7 = 8.33333333% * 7 = 58.33333333%
col-2: 100% / 12 * 2 = 8.33333333% * 2 = 16.66666667%

Не вызывает ли вопросов? - Да, тут есть нюанс, который заключается в пространстве имён. И его мы рассмотрим дальше.

Пусть имеется следующая модель пространства имён:

.col - Column - Общее пространство имён столбцов.
xs - ExtraSmall - Сетка при ширине окна браузера меньше 768px.
sm - Small - Сетка при ширине окна браузера больше 768px.
md - Medium - Сетка при ширине окна браузера больше 992px.
lg - LargeSmall - Сетка при ширине окна браузера больше 1200px.

Тогда, наши стили преобразуются:

Общие стили
col-xs-12: 100% / 12 * 12 = 8.33333333% * 12 = 100%
col-xs-7: 100% / 12 * 7 = 8.33333333% * 7 = 58.33333333%
col-xs-2: 100% / 12 * 2 = 8.33333333% * 2 = 16.66666667%

Стили для разрешения больше 768px
col-sm-12: 100% / 12 * 12 = 8.33333333% * 12 = 100%
col-sm-7: 100% / 12 * 7 = 8.33333333% * 7 = 58.33333333%
col-sm-2: 100% / 12 * 2 = 8.33333333% * 2 = 16.66666667%

Стили для разрешения больше 992px
col-md-12: 100% / 12 * 12 = 8.33333333% * 12 = 100%
col-md-7: 100% / 12 * 7 = 8.33333333% * 7 = 58.33333333%
col-md-2: 100% / 12 * 2 = 8.33333333% * 2 = 16.66666667%

Стили для разрешения больше 1200px
col-lg-12: 100% / 12 * 12 = 8.33333333% * 12 = 100%
col-lg-7: 100% / 12 * 7 = 8.33333333% * 7 = 58.33333333%
col-lg-2: 100% / 12 * 2 = 8.33333333% * 2 = 16.66666667%

Применяться на практике это будет так:

<div class="area">
    <div class="row">
	    <div class="col-xs-12 col-sm-6 col-lg-4"></div>
	    <div class="col-xs-12 col-sm-3 col-lg-4"></div>
	    <div class="col-xs-12 col-sm-3 col-lg-4"></div>
    </div>
</div>

Важно понимать, что изначально блок с классом col-xs-12 будет занимать всю ширину окна, но лишь до тех пор, пока размер окна браузера не будет превышать отметки в 768px. Как только эта отметка будет достигнута, применяется новый класс col-sm-6 и ширина блока уже будет равна 100% / 12 * 6 = 50%. Несложно догадаться, что так же будет действовать и класс col-lg-4.

Если изобразить это графически, то получится следующая картина:

Внимание!
Перечислять все классы подряд не обязательно. Используйте только те классы, которые необходимы вам.

Вы также можете вкладывать строки в столбцы:

<div class="area">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-lg-4 col-demo">
            <div class="row">
                <div class="col-xs-12 col-demo-2">Demo</div>
                <div class="col-xs-12 col-demo-2">Demo</div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-3 col-lg-4 col-demo">Demo</div>
        <div class="col-xs-12 col-sm-3 col-lg-4 col-demo">Demo</div>
    </div>
</div>

Практика

Немного поразмышляв, получаем, что наши столбцы, при любом разрешении должны иметь следующие общие свойства:

float: left
position: relative

Первое свойство прижмёт наши столбцы к левому краю, а второе создаст область для элементов с абсолютным позиционированием. Сразу замечу, что float: left нецелесообразно использовать при столбцах, занимающих всю ширину окна, то есть 100% ширины (12/12, 24/24 и так далее). Но, так как сейчас мало кто пишет на так называемом чистом CSS, а использует препроцессоры, в которых есть поддержка циклов, то следует указать и его — ведь у нас есть магия Clearfix!

Запишем общие стили для всех видов столбцов:

/* Common styles for all columns */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
  position: relative;
  float: left;
}

Выглядит ужасно! Но такова дань скорости и кроссбразуерности.

Теперь запишем стили для ExtraSmall размера:

.col-xs-1  { width: 8.33333333%; }
.col-xs-2  { width: 16.66666667%; }
.col-xs-3  { width: 25%; }
.col-xs-4  { width: 33.33333333%; }
.col-xs-5  { width: 41.66666667%; }
.col-xs-6  { width: 50%; }
.col-xs-7  { width: 58.33333333%; }
.col-xs-8  { width: 66.66666667%; }
.col-xs-9  { width: 75%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-12 { width: 100%; }

Этот блок будет применяться до тех пор, пока не сработает его переопределение, в зависимости от ширины окна браузера. Например, при ширине окна больше 768px.

@media (min-width: 768px) {
	.col-sm-1  { width: 8.33333333%; }
    .col-sm-2  { width: 16.66666667%; }
    .col-sm-3  { width: 25%; }
    .col-sm-4  { width: 33.33333333%; }
    .col-sm-5  { width: 41.66666667%; }
    .col-sm-6  { width: 50%; }
    .col-sm-7  { width: 58.33333333%; }
    .col-sm-8  { width: 66.66666667%; }
    .col-sm-9  { width: 75%; }
    .col-sm-10 { width: 83.33333333%; }
    .col-sm-11 { width: 91.66666667%; }
    .col-sm-12 { width: 100%; }
}

Внимание!
Для сокращения размера статьи, я не буду приводить код для всех разрешений. Для общего понимания достаточно и этих двух примеров. Конечный вариант, можно будет посмотреть в конце статьи.

Заключение

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

Не забывайте, что реальный пример можно посмотреть тут.

Надеюсь, что вам помогла моя статья, и вы начнёте применять эту замечательную технику в ваших проектах.