CSS. Система сеток 960

Просматривая исходный код и стили шаблона можно увидеть такие классы как: “grid_6”, “grid_8”. Эти классы использует система сеток 960. Давайте рассмотрим что это за система такая и что она предлагает.

Система сеток 960 — это попытка ускорить разработку сайтов благодаря применению форматов, рассчитанных на ширину в 960 пикселей. Есть несколько вариантов макета. Наиболее часто используют сетки на 12, 16 и 24 колонки.

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

Применение

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

Откройте файл grid.css, там можно увидеть:

Вначале css файла Вы увидите:

columns:24
Column width:30
Gutter width:10

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

Потом идет класс .container_24{} — этот класс нужно использовать для контейнера, в котором будет находится все содержимое вебсайта.

Примечание: основной класс следует назвать container_12 или container 16 в зависимости от количества используемых столбцов.

Потом классы .grid_1, .grid_2 и т.д – эти классы используют чтобы установить ширину внутренних блоков. Блоки с grid классами нужно поместить внутрь класса container_24.

Эти классы обозначают ширину блоков:

.container_24 .grid_2 {

width:70px;

} 

Например, код для этого макета такой:

Some content


Some content


Some content


Some content

В этом html макете были использованы такие grid классы:

.container_24 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}

.container_24 .grid_9 {
	width:350px;
}

.container_24 .grid_12 {
	width:470px;
}

.container_24 .grid_15 {
	width:590px;
}

Можно также применить несколько дополнительных классов как, например:

.prefix_1, .prefix_2 и т д — определяет отступ блока с левой стороны;

.suffix_1, .suffix_2 и т д — определяет отступ блока с правой стороны;

Больше о системе сеток 960 Вы можете узнать на официальном сайтеhttp://960.gs/.