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

Проблемы с сеточной системой на 960 пикселей 

Маленькие интервалы между столбцами текста

На этом макете Photoshop видно, как выглядит расстояние 20px между столбцами в сеточной системе на 960 пикселей. Интервал между столбцами текста несколько маловат для современного дизайна.

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

Ненужные левый и правый внешние отступы

Область содержимого в сеточной системе на 960 пикселей по-настоящему 940px, а не 960px. Она называется 960, так как учитываются внешние отступы справа и слева. Некоторые считают, что эти внешние отступы улучшают видимость на мобильных устройствах, таких как iPhone и iPad. Вообще, если требуется внешний отступ, лучше применить его к внешнему блоку, а не к столбцам.

Слишком много классов

Внешний вид — это дело вкуса, но, даже учитывая это, с CSS тоже есть серьезные проблемы. Ниже приведен пример. Чтобы добиться такой верстки, как в примере дизайна ниже с помощью сеточной системы на 960 пикселей, потребуется добавить дополнительные классы CSS: .alpha, .omega, и .clear. Классы .alpha и .omega требуются, чтобы избавиться от внешних отступов слева и справа от столбцов. Класс .clear требуется, чтобы очистить плавающие блоки после каждого ряда, чтобы они отталкивались друг от друга, а не собирались в один горизонтальный ряд.

Более простая сеточная система на 978 пикселей 

Демонстрация работы

Сеточная система на 978 пикселей не использует ненужных правого и левого внешних отступов. В результате ширина области содержимого увеличивается на 38px. Интервалы между столбцами текста увеличиваются с 20px до 30px. Эта сеточная система также подходит для стандартного экрана разрешением 1024 точки, и столбцы могут быть разделены  любым путем: 1/11, 3/3/3/3, 4/4/4, 3/9 и т. д.

Код HTML и CSS для сеточной системы на 978 пикселей

Демонстрация работы

Ниже находится код CSS для более простой сеточной системы, он очень изящно справляется с проблемой избытка классов. Здесь есть только левый внешний отступ, который создает интервалы между столбцами текста. Класс .grid12 не нужен, так как двенадцатая ячейка сетки — это оставшаяся ширина внешнего блока. Здесь нет классов .alpha и .omega, но есть единственный класс .first, который требуется для первого столбца в каждом ряду. Класс .first нужен, чтобы очистить плавающие блоки после каждого ряда, чтобы они отталкивались друг от друга, а не собирались в один горизонтальный ряд, и чтобы избавиться от левого внешнего отступа. Так как класс .first очищает плавающие блоки, то класс .clear после каждого ряда не требуется.

.container {
	width: 978px;
	margin: 0 auto;
}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
	float: left;
	margin-left: 30px;
}
.grid1 {
	width: 54px;
}
.grid2 {
	width: 138px;
}
.grid3 {
	width: 222px;
}
.grid4 {
	width: 306px;
}
.grid5 {
	width: 390px;
}
.grid6 {
	width: 474px;
}
.grid7 {
	width: 558px;
}
.grid8 {
	width: 642px;
}
.grid9 {
	width: 726px;
}
.grid10 {
	width: 810px;
}
.grid11 {
	width: 894px;
}
.first {
	margin-left: 0;
	clear: left;
}

Более простая сеточная система на 940 пикселей 

Демонстрация работы

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

Заключение 

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

Автор урока Nick La

Перевод — Дежурка

Смотрите также:

• Пять простых, но полезных свойств CSS 
• Адаптивные системы сеток
• Создание css-сетки миниатюр с динамическим всплывающим меню