Когда я впервые столкнулся с 960 Grid System, я был чрезвычайно взволнован тем, как просто с ее помощью можно реализовать сложные макеты.
Однако, так как в то время я был еще относительным новичком в веб-дизайне, когда я скачал файлы, там было столько информации, что очень быстро все это мне стало казаться очень сложным:
При наличии такого количества кодов, разве можно просто создать макет?
Эта статья предназначена для веб-дизайнеров и веб-разработчиков интерфейсов, которые интересуются системами макетов на базе сетки, но не могут в них разобраться.
Мы рассмотрим конкретно 960 Grid System , однако после прочтения этого руководства, вы увидите, что большинство других систем сеток очень похожи, и вам будет проще с ними работать после того, как вы поймете несколько основных принципов.
Прежде чем перейти к специфике 960 Grid System , давайте кратко рассмотрим дизайн на основе сетки в целом. Эта идея, конечно, не возникла с появлением Интернета. На самом деле, она происходит от одного из старейших и фундаментальных принципов проектирования: выравнивания.
Наш мозг привык упрощать вещи, чтобы их легче было понять. Именно поэтому мы стараемся навести порядок в вещах, которые кажутся хаотичными. Поэтому мы и видим изображения лиц в лунных кратерах.
Естественно, чем легче наводится порядок, тем быстрее наш мозг может определить шаблон и двигаться дальше. Сетки настолько организованны и упорядочены, что они практически не требуют дополнительного осмысления с нашей стороны .
Рассмотрим два макета страниц, которые представлены на рисунке ниже:
Хотя оба этих изображения представляют собой просто набор прямоугольников, верхнее изображение кажется нам принципиально лучше, чем то, что расположено ниже. Мы можем мгновенно распознать структуру, принять ее и двигаться дальше.
Нижнее же изображение визуально кажется неупорядоченным. В нем нет четкой закономерности, порядка или цели – оно просто выглядит как набор случайных фигур.
Когда мы смотрим на что-то, наши глаза имеют тенденцию судорожно пытаться за доли секунды найти закономерность, что увеличивает время, необходимое нам, чтобы оценить картину в целом.
Любопытно, что случайные вещи все равно могут быть красивыми. Случайные элементы, безусловно, могут выглядеть красиво на природе, в искусстве, и даже в дизайне, но им не место в логической организации информации.
Дело в том, что сетки являются одним из самых простых и мощных способов создать порядок на странице. Они могут казаться холодными и жесткими, но помните, что они являются очень эффективными и действенными, к тому же они могут быть достаточно гибкими, если вы не боитесь, что ваше воображение увязнет во всех элементах, необходимых для организации структуры.
960 Grid System – как и другие подобные инструменты – обеспечивает быстрый и простой способ создания макетов на основе сетки с помощью CSS. Это делается путем предоставления протестированных на совместимость с браузерами и оптимизированных предустановленных размеров столбцов, в которых вы можете размещать контент.
До CSS3, не так то и просто было разбить веб-страницу на столбцы, не прибегая к утомительным математическим вычислениям.
Например, если у вас есть контейнер шириной в 1000 пикселей, и вы хотите разделить его на три столбца, то это будет 333 и 1/3 пикселя на столбец (не лучшее число). Кроме того, столбцы должны быть разделены, иначе их содержимое сольется – значит нужно добавить отступ.
Если к этому добавить отступ в 10 пикселей с каждой стороны каждого столбца, мы должны дополнительно вычесть по 20 пикселей от ширины каждого столбца. Это дает нам 3 столбца примерно по 313 пикселей в ширину и с отступом в 10 пикселей с каждой стороны (даже в этом случае получается 999 пикселей, а не 1000).
Хотите создать 4 столбца чуть ниже? Тогда вы должны начать весь процесс подсчетов с начала и вычесть 80 пикселей отступа от 1000 пикселей общей ширины, а затем 920 пикселей разделить на 4, чтобы получить ширину столбцов в 230 пикселей.
Наконец, если вы хотите добавить боковую панель, которая будет иметь ширину в одну треть ширины страницы, вы должны создать столбец в 750 пикселей для контента и еще один в 250 пикселей для боковой панели, затем вычесть 40 пикселей отступа, чтобы получить ширину одного столбца 730 пикселей и 230 пикселей – ширину другого.
Как и многие веб-дизайнеры до вас. Это, конечно, не высшая математика, но это и не то, что вы хотите делать снова и снова, каждый раз, когда беретесь за новый проект.
Решение? Найти кого-то другого, кто разберется с этими сумасшедшими вычислениями ширины столбцов, забьет их в CSS-документ и позволит вам скачать его бесплатно. (Этим человеком оказался Натан Смит , создатель 960 Grid System ).
960 Grid System – это простой способ создавать макеты сайтов с использованием сетки, которая имеет ширину 960 пикселей:
Причина, почему в качестве базовой ширины выбраны 960 пикселей, заключается в том, что число 960 дает возможность для создания большого количества вариантов разбивки на столбцы и отступы, используя при этом только целые числа. И эти варианты прекрасно вписываются в большинство расширений экранов.
960 GS выпускается в двух основных вариантах: сетка с 12 столбцами и сетка с 16 столбцами (возможно подключение 24-разрядной версии, для тех, кому нужен экстремальный контроль дизайна).
В версии из 12 столбцов, самый узкий столбец имеет ширину 60 пикселей. Ширина каждого следующего столбца увеличивается на 80 пикселей.
Таким образом, доступные размеры ширины столбцов составляют: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 и 940 пикселей:
В 16-разрядной версии самый узкий столбец имеет ширину 40 пикселей, и каждый следующий столбец становится шире на 60 пикселей.
Таким образом, доступные размеры ширины столбцов составляют: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 и 940 пикселей:
Когда вы смотрите на приведенные выше диаграммы, то каждую из темно-синих горизонтальных полос можно рассматривать в 960 Grid System , как класс CSS.
Чтобы создать объект в структуре вашей страницы, ширина которого соответствует ширине одного из этих блоков, нужно просто присвоить ему в div надлежащий класс – вот и все!
Классы имеют показательные названия в соответствии с их размерами сgrid_1 — самый узкий класс CSS, grid_12 – самый широкий (в версии с 16 столбцами самый широкий класс – grid_16 ).
Таким образом, еще раз взгляните на приводимое раньше изображение, но на этот раз думайте о разных размерах ширины столбцов, как о классах CSS:
Эта система названий позволяет невероятно просто за считанные секунды составлять сложные макеты. Для того чтобы заполнить всю ширину страницы используется хитрая уловка. Суть ее заключается в том, что сумма номеров выбранных классов должна равняться 12 в 12-разрядной версии и 16 в 16-разрядной версии.
Например, в версии с 12 столбцами, если у вас есть 3 блока текста, которые вы хотите разместить бок о бок в 3 столбца, просто присвойте класс grid_4 каждому из них, что в сумме составит 12 (4+4+4=12):
Аналогично, присвоив класс CSS grid_4 в версии с 16 столбцами, можно легко создать макет из 4 столбцов (4+4+4+4=16):
Чтобы быть уверенными, что вы использовали соответствующие классы, не забудьте разместить элементы 12-разрядной версии внутри div с классом container_12, а классы 16-разрядной версии внутри div с классом container_16 .
Если вы никогда до этого не работали с 960 GS, я рассчитываю, что прямо сейчас у вас вырвется восклицание на манер «Вот оно как! », которое будет относиться к тому, насколько просто манипулировать макетом с помощью этой системы.
960 Grid System позволяет независимо перемещать элементы, перетаскивая их вдоль горизонтального края. Это достигается с помощью классов CSS push и pull .
Рассмотрим два примера, приведенные на рисунке ниже. Первый пример является макетом, состоящим из 4 столбцов, использующим только класс grid_3 .
А во втором варианте, я потянул первый столбец и поставил его на место последнего, в результате чего столбцы сместились на одну позицию, относительно того, как они обычно располагаются в макете:
Имейте в виду, что вы можете перетаскивать блоки куда угодно. Если бы я захотел перетащить элемент из двух столбцов, я бы реализовал класс push_2 , и так далее.
Система push/pull глубоко затрагивает структуру страницы в HTML-документе.
Например, представьте, что в приведенном ниже примере мы вводим имя сайта в логотипе и помещаем его в первый элемент на странице.
Логотип является одним из важнейших элементов сайта, и вы хотели бы, чтобы он присутствовал в качестве первого пункта HTML-разметки. В тоже время, чтобы визуально он выводился в центре страницы.
До перетаскивания:
Чтобы визуально расположить элемент логотипа между двумя текстовыми столбцами, вы должны использовать следующий HTML-код:
text column
text column
В результате выводимый макет будет выглядеть следующим образом:
После перетаскивания:
Несмотря на то, что логотип стоит в начале разметки, визуально он будет располагаться в центре страницы.
Вы будете часто сталкиваться с ситуацией, когда вам нужно создать в макете пустое пространство (негативное пространство — это отличный инструмент управления дизайном).
Чтобы достичь этого, для блоков div применяются классы prefix и suffix . Их реализация очень похожа на реализацию классов push и pull.
Например, чтобы оставить пустое пространство, которое будет по ширине равно одному столбцу, используйте перед элементом класс prefix_1 или после элемента класс suffix_1 :
Как видите, в приведенном выше примере используется класс suffix_3 , чтобы создать после него пустое пространство шириной в три столбца.
И в заключении я хочу дать вам немного информации о классах alpha («первый «) и omega («последний «), которые должны применяться к любым элементам сетки, которые являются дочерними для других сеток.
Очевидно, что класс alpha будет применяться к первому дочернему элементу, а класс omega к последнему.
По существу, эти классы задают границы зоны, в которой вы можете размещать модули сетки внутри других модулей.
Получив эти новые знания, теперь вы должны чувствовать себя экспертом 960 Grid System .
Базовые принципы системы включают в себя всего 5 концепций, которые вы должны помнить:
В 960 Grid System используется также сброс CSS. Это опциональный файл, в основе которого лежит популярный набор сброса CSS Эрика Мейера . Если он вам понравится, используйте его. Если нет, отправьте его в корзину!
Теперь, когда вы являетесь экспертом веб-дизайна на основе сетки и 960 Grid System , вот несколько инструментов и ресурсов, с которыми вы можете ознакомиться, чтобы еще больше разобраться в этой теме.
Замечательная адаптивная версия 960 GS ! Плавающие веб-макеты позволяют скорректировать структуру, чтобы она соответствовала странице. В них применяются некоторые действительно сложные коды, но если вы используете эту систему, она будет делать всю тяжелую работу за вас:
Чрезвычайно простая система сеток, элементарная и легкая для понимания. Она имеет много возможностей для настройки, но по умолчанию использует базу в 960 пикселей:
Простой и гибкий конструктор CSS сеток на базе 960 Grid System :
Если вы скептически относитесь к 960 Grid System и к тому, что дизайн на основе сетки может предложить вам как веб-дизайнеру, ознакомьтесь с этой галереей макетов. Как видите, приложив немного фантазии и изобретательности, вы получаете просто безграничные возможности.
После прочтения данной статьи вам уже не будет составлять никакого труда, чтобы разобраться в других CSS фрэймворках, т.к. все они работают по одному и тому же принципу.
Перед тем, как перейти к специфике системы 960 Grid, я хочу разъяснить что такое дизайн основанный на сетке. В принципе в этой системе нет ничего нового, т.к. она основана на старом и добром "выравнивании"
Итак, расслабляем мозги и начинаем впитывать информацию. Рассмотрим несколько макетов страниц:
Как вы видите на данном рисунке изображены исключительно прямоугольные фигуры. Вы конечно же узнали в них различные блоки ваших сайтов. Идём дальше.
На данный момент не было цели создать что-то логическое. Перед вами просто набор фигур, расположенных в хаотическом порядке. Как вы можете заметить, хаос тоже обладает какой-то своей красотой. Он присутствует везде, в природе, в искусстве, дизайне...
Фишка заключается в том, что сетка приносит некоторое логическое содержание в этот хаос и ставит всё на свои места. Это кому-то может не понравиться, но сетки очень важны и эффективны для современного дизайна и совсем не загоняют вас в рамки. Вы по прежнему сможете творить всё, что вздумается.
960 Grid и подобные ей системы, позволяют быстро создать вёрстку основанную на сетке. Данный результат достигается при помощи протестированных на кроссбраузерность пресетов ширины страницы, куда вы помещаете свой код.
До CSS3 было довольно таки геморройно создать множество колонок на своей странице и чтобы они смотрелись одинаково во всех браузерах. Ну и конечно надо было запачкаться в математических расчётах.
К примеру, у вас есть контейнер шириной 1000px и вы хотите разделить его на три колонки. При подсчёте вы выясняли, что вам понадобится 333px на одну колонку. Потом начинались заморочки с отступами, потому что если мы хотели добавить внешний отступ в 10 пикселей, то это значило, что нам надо отнять 20 пикселей у каждой колонки. В итоге у нас получались 3 колонки по 313px что в сумме давало 999px, но никак не 1000px.
А что если вам надо сделать ниже ещё 4 колонки? Всё сначала! Вам надо отнять 80px от ширины родительского контейнера. Остаётся 920px, которые мы делим на 4 колонки шириной 230px.
В конце концов, вы хотите добавить блок меню, который будет занимать 1/4 страницы. Вам надо разделить родительский контейнер на 2: один 250px, другой 750px. Далее опять отнять компенсирующую длину в 40px из-за отступов, и получить колонки шириной 730px и 250px
Многие дизайнеры сталкивались с этим. Это конечно не высшая математика, но на всё это уходит время и нервы. Представьте, что к всему вышеперечисленному надо добавить ещё и рамку в 1px (и всё по новой).
Где же тот кто нас спасёт от всего этого сумасшествия? Вот он - Nathan Smith , создатель 960 Grid.
Данная система - это прекрасное решение для тех, кто не имеет ничего против сайтов шириной 960px.
Почему только 960? Во-первых, т.к. данная ширина позволяется сделать n-ое количество пропорциональных сегментов из которых будет состоять страница. Во-вторых, данная длина "удовлетворяет" подавляющее большинство экранных расширений.
Система 960 Grid может быть представлена нам в 2х начальных вариантах, состоящая из 12 или 16 колонок (Но так же есть и 24 колоночная система - но эт для извращенцев).
В 12 колоночной системе первая ячейка имеет 60px, а все последующие 80.
Так что вы можете делать колонки шириной: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 и 940 пикселей.
Соответственно в 16 колоночной версии, первая будет составлять 40px, а все последующие 60px.
Это значит, что ширина колонки может быть следующей: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 и 940 пикселей.
На изображениях представленных выше, вы видите большие и маленькие прямоугольники тёмного цвета, которые представляют собой контейнеры.
Для того, чтобы создать такой контейнер необходимо блоку присвоить соответствующий класс и всё!
Названия данных классов очень просты и говорят сами за себя. Например grid_1 - представляет самую короткую ширину, а grid_12 - самую длинную (в 12 колоночной системе).
Теперь, глядя на этот рисунок вы будете видеть не тёмные прямоугольники, а CSS классы:
Как я уже упомянул ранее названия классов говорят сами за себя. Однако запомните, что в 12 колоночной системе на одну строку не может быть больше 12 одно колоночных элементов и т.д. Так что в какой-то степени считать всё-таки надо будет. Но теперь намного легче). В системе с 16 колонками всё то же самое.
К примеру, если у вас 12 колоночная система и вы хотите создать 3 блока текста, следующие друг за другом, то вам этим трём блокам необходимо задать класс grid_4, что в сумме даст 12 (4+4+4)
Точно такая же логика рассуждения справедлива и к 16 колоночной системе для 4х блоков: 4+4+4+4 = 16.
Теперь внимание: для того, что всё это работало все ваши блоки нужно поместить в один родительский контейнер с классом container_12 или container_16.
Если вы никогда не сталкивались с подобными системами, то я представляю, что сейчас с вами происходит.. Теперь всё можно делать намного легче, быстрее и кроссбраузернее:)
Кроме примитивных классов, которые мы только что с вами видели, система 960 Grid поддерживает ещё несколько полезных фичей, таких к примеру, как перемещение колонки вперёд или назад. Соответственно классы будут push и pull.
Примеры вы можете увидеть на изображении, которое находится ниже. Первая часть изображения состоит из четырёх колонок с классом grid_3.
На второй половине изображения вы можете увидеть результат применения классов push_1 и pull_1.
Помните, что вы можете перемещать колонки столько, сколько вам надо (но в пределах сетки). Если вы хотите переместить колонку на 2 ячейки, то вам надо выставить ей класс push_2 и т.д.
Данная система позволяет разместить элементы на странице.
Представьте, что у вас такая же ситуация, какая на рисунке, расположенном ниже. Блок логотипа стоит на первом месте.
Теперь задача: оставить блог с логотипом на первой позиции, но сделать так, чтобы на странице он отображался в центре.
Для решения задачи нам надо применить следующие классы:
text column
text column
Результаты не заставят себя долго ждать.
Цель достигнута!
Если же вам понадобится создать некоторое открытое пространство между блоками, то тут на помощь к вам придут классы prefix и suffix, которые работают практически как push и pull.
К примеру для того, чтобы оставить 1 колонку пустой после блока используйте класс suffix_1 и prefix_1 для пустой колонки до элемента.
В примере выше, вы видите результат применения класса suffix_3 к первому элементу на странице.
Последнее, что вам нужно знать, — это ещё два класса: alpha (первый) и omega (последний), которые должны применяться только если элемент является потомком элемента с одним из вышеперечисленных классов.
Данные классы поставят элементы на соответствующие места - на первое и последнее.
Всё! Теперь вы эксперт в системе 960 Grid.
Вам следует помнить 5 главных идей:
Это ещё не всё! В комплекте с этим замечательным CSS фрэймворком идут так же не менее полезные интернет ресурсы.
Это специальный сайт, вёрстка которого была сделана с помощью системы 960 Grid. Тут вы убедитесь в том, что на этой системе можно делать страницы любой сложности.
Этот сайт предназначен для тех, кого не устраивают стандартные размеры данной системы и он хочет немного другие. Выставляйте свои опции, сайт сформирует для вас новый файл 960 Grid и пользуйтесь на здоровье!
То же самое, что и прошлый ресурс, только визуально всё понятнее
Если вы сомневаетесь в возможностях системы 960 Grid, то советую вам просмотреть галерею сайтов, которые были сделаны на данной системе
Ещё один CSS фрэймворк, основанный на 960 Grid, предназначенный для оформления текстов
Комбинация ресурса 2 и 3
Несмотря на всю гибкость данной системы у неё есть некоторые ограничения. Всё это не значит, что всем нам нужно переходить на сеточные системы. Это может помешать творчеству разработчиков. Но если у вас нет особых требований, то целесообразнее использовать такую систему.
Как я уже говорил, помимо данной системы, существуют и другие со своими специфическими особенностями. Мы о них ещё поговорим, а пока я бы хотел узнать ваше мнение обо всём вышеизложенном. Спасибо за внимание!
Я хочу дать исчерпывающее описание замечательному фреймворку для построения модульных сеток 960gs. Недавно где-то в комментариях сказали, что 960gs сложнее в понимании, чем blueprint , что меня удивило. Я не хочу заниматься сравнением этих фреймворком, хотя бы потому, что они выступают в разных весовых категориях, однако, для построения модульной сетки ничего легче и проще в понимании, чем 960gs я не видела.
Про модульные сетки на Хабре, кажется, писали, да вот что-то поиск подкачал, всякая фигня находится, вроде «Философской геометрии». Вот навскидку несколько ссылок:
Так как я сама программист, то, надеюсь, матерые верстальщики и дизайнеры простят мне некоторые оплошности, если они вдруг допущены ниже по тексту. Весь код я убрала на pastie.org , во-первых, Хабр не дает разместить статью целиком из-за большого количества тегов при подстветке кода, во-вторых, код не будет напрасно раздувать статью.
960gs получил свое название из-за выбора Натаном Смитом (Nathan Smith), автором фреймворка, полной ширины контейнеров по-умолчанию в 960 пикселей. Однако, 960 px – совсем не железное ограничение.
Все элементы 960gs описаны как классы для css. Очевидно, использовать их следует как <тег class=«960gs_someclass»>.
В данной статье я буду использовать код фреймворка с официального сайта, 960.gs/css/960.css . Для чтения и понимания статьи этот код смотреть совсем не обязательно, в конце повествования я остановлюсь на способах получения css-кода подробнее.
В примерах, в качестве элементов разметки, я буду использовать дивы, а, для удобства – называть такие дивы по имени их 960gs-класса. К примеру, див с классом.container_12 я буду называть элементом container. Надеюсь, эта небольшая вольность найдет понимание в глазах гуру от верстки.
Так же, при описании параметров элементов фреймворка, я буду описывать только параметры оригинального css-кода. Разумеется, верстальщик волен менять их или дополнять новыми свойствами так, как ему будет нужно.
При переводе, элемент grid получил название «ячейка», что несколько далеко от дословного «сетка», зато звучит не так уродливо и гораздо ближе к реальному назначению. Сравните: «поместить три сетки в одну строку» и «поместить три ячейки в одну строку».
Надеюсь с шероховатостями покончено, поэтому перехожу непосредственно к теме данной статьи.
Несколько контейнеров удобно использовать, к примеру для того, что бы разделить страницу на области на шапки/основного содержимого/подвала (header/content/footer).
Вложенные контейнеры в рамках идеологии 960gs являются абсурдом (представьте себе вложенные в html), однако путем манипуляций с отступам в css вложить контейнеры друг в друга возможно. Вот только зачем?
В дальнейшем, я буду использовать контейнер с параметрами:
На этапе разработки удобно использовать в качестве background-image контейнера картинку-сетку, взять которую можно, например, на официальном сайте (про это будет написано немного дальше). Правда, только для стандартных 12 и 16 колоночных макетов.
div.container_12 {
background: #fff url("/img/12_col.gif") repeat-y;
}
Будьте бдительны, если колонок требуется больше, чем есть у контейнера, крайние правые ячейки, не влезающие по размеру в одну строчку, будут насильно низвергнуты на строку ниже.
Любознательные читатели могут заглянуть в css код и узнать, что формируются канавки с помощью margin’а, в отличие от ячеек, для которых нужен html-элемент. Впрочем, я надеюсь, это было очевидно всем.
Агрессивные верстальщики могут с негодованием переименовать в коде фреймворка все упоминания grid_ на, к примеру, cell_, что, на мой взгляд, ближе к истине, а так же более наглядно.
Не секрет, что дивы с классом clear используются верстальщиками относительно часто. Для того, что бы избежать возможных конфликтов между кодом всего сайта и кодом 960gs в будущем, вероятно, верстальщику следует либо переименовать в коде css файла фреймворка класс clear на какой-нибудь другой (к примеру, на clr), либо уточнить его, (например, .container_12 .clear). Всё же, по моему мнению, переименование в случае вероятных конфликтов – более подходящий способ.
Кстати, пример является одним из редких случаев необходимости использования тега
.
Если нужно вложить только одну ячейку, достаточно использовать только класс alpha, без omega.
Просматривая исходный код и стили шаблона можно увидеть такие классы как: “grid_6 ”, “grid_8 ”. Эти классы использует система сеток 960. Давайте рассмотрим что это за система такая и что она предлагает.
Система сеток 960 — это попытка ускорить разработку сайтов благодаря применению форматов, рассчитанных на ширину в 960 пикселей. Есть несколько вариантов макета. Наиболее часто используют сетки на 12, 16 и 24 колонки.
Ниже показан пример 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;
}
Например, код для этого макета такой:
В этом 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 Вы можете узнать на официальном сайте