Простая процентная сетка на HTML5

Сеточные системы (фреймворки) очень сильно помогают программистам, занимающихся версткой документов, приложений и т.п.

И как-раз в этой статье речь пойдет о такой системе, которая входит в состав Easy framework.

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

Система поддерживает до 6 столбцов, равных по ширине. Таким образом вы можете выбирать от 2 до 6 столбцов в наборе. Расстояние между столбцами всегда 2%. Т.е. сколько бы не было столбцов в строке, расстояние между ними всегда будет одно и то же.

Наименование столбцов и контейнеров

Важно запомнить, что у контейнера, в котором будут находится элементы с процентной шириной, должен быть класс с наименованием cols, в то время как у каждого элемента должен быть класс col (столбец — singular). Используя всего два класса мы можем составить сеточную систему из двух колонок.
Код такой:

Обратите внимание на имя класса first. Мы используем его (наряду с псевдо-элементом :first-child), чтобы стереть левый margin для первого столбца.

Если вам нужно создать более 2 столбцов, то в контейнер нужно добавить класс colsX, где X— количество столбцов в контейнере.
Вот пример:

Если вам нужен столбец с умноженной шириной (двойная, тройная, четверная ширина), то вы добавляете в нужный столбец класс colX, где X — множитель ширины.

Вот пример для набора из 5 столбцов, где второй столбец с удвоенной шириной.

Примеры

Давайте посмотрим на следующие примеры.

• 2, 3 и 4 колоночный пример — фиксированная ширина
• 5 колоночный пример — фиксированная ширина
• 6 колоночный пример — фиксированная ширина
• 2, 3 и 4 колоночный пример — плавающая ширина
• 5 колоночный пример — плавающая ширина
• 6 колоночный пример — плавающая ширина

Итог

И так, резюмируем простую процентную сеточную систему на HTML5.
Реализовано:

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

Добавлено:Стиль padding для элементов с процентной шириной

Если вам нужно добавить столбцам свойство CSS padding, то принцип такой. Например, нужно изменить padding на две вертикальные стороны по 1% на каждую.
Для этого прописываем следующий код:

Для того, чтобы все не сбилось, уменьшаем физическую ширину столбца. Т.е. если увеличили padding для каждого элемента на 2%, то уменьшаем ширину на те же 2%. Т.е., например, для стандартной колонки вместо ширины 49% станет 47%. И так нужно будет изменить ширину для всех колонок.

Для этого мы приготовили пример с 1% padding.