Как сделать сетку в браузере

Обновлено: 03.07.2024

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

Готовые рабочие среды для модульных сеток. Преимущества и недостатки.

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

Однако такие готовые решения имеют и недостатки. Для начинающих разработчиков большинство из них представляют достаточно громоздкие структуры кода и простота создания шаблона часто теряется за поиском наиболее подходящего стиля для элемента HTML.

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

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

Строим свою модульную сетку.

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

Такие рассуждения приобретают особенную силу при построении простых страниц. Конечно, очень здорово получить помощь при построении шаблона. Но тащить всю рабочую среду на одну страничку - это похоже на высаживание единственного маленького саженца с помощью здоровенного экскаватора.

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

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

Создаем колонки в CSS

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

Допустим, вы хотите установить четыре колонки. Первое, что придется взять в расчет - ширина. Например, наш контейнер имеет ширину 900 px. Если разделить 900 px на 4 колонки, то получим 225 px на одну колонку. Все просто! Но такие колонки будут прилипать друг к другу. Поэтому между ними должны быть отступы. Но отступы раздуют наш шаблон и вытолкнут колонки за пределы контейнера.

Нам необходимо принять во внимание ширину отступов между колонками. Допустим, первая, вторая и третья колонки имеют отступ справа равный 3 px (свойство margin-right ). Тогда три отступа будут занимать 9 px, а ширина колонки будет (900 px - 9 px)/4=225.75 px.

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

Нужно использовать другой метод, который будет приводить к изменениям в потомках при изменении родительских элементов.

Используем проценты

Если вместо пикселей использовать проценты, то наши математические расчеты станут немного проще, а сетка приобретет оттенок интеллектуальности, достаточной, чтобы изменяться вместе с шириной родительского контейнера.

Вместо того, чтобы держать все вычисления в голове можно воспользоваться инструментом для вычислений. Существует достаточно удобный онлайновый программируемый калькулятор, который вполне подходит для решения таких простых задач - Instacalc.

Instacalc позволяет создавать формулы для повторных вычислений. Для наших расчетов создан специальный калькулятор (вы можете создать свой, если пожелаете), в котором можно изменять количество колонок, величину отступа между колонками и получать рассчитанные значения для ширины колонок. Для ширины используются проценты, 100% - ширина родительского контейнера.

Если нужно провести расчеты для трех колонок, то просто меняем в первой строке калькулятора 4 на 3 и получаем результат.

Построим нашу сетку

Достаточно теории. Ничто не поможет лучше понять материал, чем практическое решение насущного вопроса.

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

Теперь перейдем к CSS. Сначала установим ширину контейнера и свойство overflow: hidden . Затем зададим стиль класса с помощью результатов проделанных вычислений. Они хранятся в калькуляторе.

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

Можно менять ширину контейнера. Весь шаблон перестроится автоматически. Но для настоящего резинового шаблона нужно установить и ширину контейнера в процентах. Тогда при изменении ширины окна браузера все будет также пропорционально меняться.

Комбинируем колонки

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

В калькуляторе есть формулы для расчета двух и трех объединенных колонок.

HTML код будет очень похожим на предыдущий. Но содержание последней колонки заключено в элемент с div классом широкой колонки.

В коде CSS надо добавить класс для широкой колонки:

Наш код в браузере будет выглядеть следующим образом:

Теперь можно комбинировать различные варианты размещения содержания, чтобы создавать интересные шаблоны.

Заключение

В результате у нас получилась модульная сетка. которая автоматически подстраивается под ширину контейнера. Код очень компактный и соответствует требованиям семантики.

Так можно строить и более сложные модульные сетки. Причем их создание не требует значительных усилий со стороны разработчика.

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

CSS Сетка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1920x1080
1366x768
1024x768
768x1024
540x960

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теория

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Практика

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

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

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

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

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

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

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

Заключение

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

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

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

Делимся на оплату хостинга или кофе.
Чем чаще пью кофе, тем чаще пишу статьи.

Уже в течении нескольких лет техника верстки сайтов при помощи сетки пользуется популярностью у разработчиков. В сети существует большое количество CSS-библиотек (Grid Systems) для работы с сеткой. Стоит заметить, что эта методика включена в Bootstrap, который на мой взгляд является одним из самых популярных CSS-фреймворков (если не сказать, что самым популярным).

Использование сетки в процессе верстки сайтов дает разработчику ряд преимуществ: увеличивается скорость разработки, верстать становится легче за счет четкого позиционирования элементов. Размещая элементы макета по сетке, вы сразу замечаете, что страница становится более аккуратной, блоки выглядят пропорционально, имеют одинаковые отступы. Конечно же, при использовании этой методики существуют и свои маленькие недостатки: например, в код добавляются дополнительные элементы разметки. Эти недостатки незначительны, поэтому их можно считать особенностями этого подхода.

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

Но давайте по порядку.

► Сначала скачаем этот полезный скрипт.

► Затем подключит его к своей страничке. Не забудьте перед этим подключить jQuery, иначе ничего работать не будет.

В стандарте CSS Grid Layout есть масса свойств и возможностей,с которыми бы хотелось разобраться, чтобы иметь возможность их применять на практике. Одной из таких возможностей является использование нумерованных и именованных линий сетки для распределения между ними grid-элементов.

Grid-lines (линии сетки) — это горизонтальные и вертикальные разделители grid-контейнера. Эти линии находятся по обе стороны от столбца или строки. Вы можете посмотреть на их расположение в инспекторе свойств браузера ( F12 , или Ctrl+Shift+I ), если поставите флажок, который позволяет накладывать линии сетки и отображать номера и названия (имена) линий в браузере.

На скриншоте иже вы увидите, как это можно сделать в инструментах разработчика в браузерах Mozilla Firefox и Google Chrome последних версий.

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

Учтите, что в странах с правосторонней письменностью (на арабском языке, например), нумерация будет идти наоборот.

Кроме индексов, или числовых номеров линий сетки, мы можем задавать имена, которые потом будем использовать при размещении внутри сетки grid-элементов. С именованных линий мы с вами и начнем.

Практическое использование имен линий сетки для указания расположения элементов внутри нее

На примере мы видим всего 5 элементов сетки, причем расположены они не строго друг под другом стройными рядами в виде одинаковых ячеек, а как бы по кругу с квадратной ячейкой по центру.

Создание разметки. Основные CSS-свойства для grid-контейнера

Для начала нам нужно создать grid-контейнер и распланировать элементы сетки в нем. Поскольку изначально сетка очень похожа на таблицу и состоит из некоторого целого числа строк и столбцов, то для примера мы возьмем сетку размером 3х3.

Читайте также: