19 апреля 2008 в 00:10

Grid Design или вёрстка с Сеткой.

CSS*
На технику Сетки я обратил внимание около года назад. Тогда эта техника после очень поверхностного изучения показалась мне бесполезной и очень экспериментальной, отталкивало то что для реализаций необходимо создавать лишнюю разметку. Но сейчас уже становится трудно не замечать количество веб-сайтов построенных на сетке, а так же количество статей и уроков о ней. Благодаря последним стало гораздо проще изучить и понять принципы и концепцию, сделать более менее реальные выводы. Мой вывод спустя год таков — «Это простое и полезное решение которое когда либо было создано для вёрстки веб-страниц, должен знать каждый уважающий себя веб-дизайнер.»

Что такое сетка знает каждый кто когда либо работал с графическими редакторами (Photoshop, Fireworks, Gimp и т.п.) и конечно же оценил её необходимость при создание любого дизайна. Но как реализовать Сетку в вебе? По сути Табличная вёрстка была самым настоящим дизайном веб-страниц с Сеткой, несомненно очень удобным. Но не целевое использование элементов table приводило в ужас.
К счастью огромная популярность веб стандартов, выросшая и продолжающая расти за последние годы, а так же их поддержка современными броузерами, дали нам возможность создавать много-функциональные страницы с очень небольшой, логичной разметкой. Такая вёрстка получила название Блочная. Но и у Блочной вёрстки оказалась слабая сторона. При создание страниц с огромным набором элементов различных по размерам и по смыслу, разметка таких страниц стала очень тяжёлым занятием, а если над разметкой работает более чем один человек такая работа может стать кошмаром.
И вот на выручку пришла техника с использованием Сетки. Эта техника является гибридом между Блочной и Табличной вёрсткой. Её использование даёт нам:
  • скорость и лёгкость разработки
  • свободу позиционирования
  • пропорциональность элементов страницы и их размещения

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

Что такое вёрстка с Сеткой? Прежде всего это концепция. Концепция которая включает в себя очень много аспектов дизайна и очень мало правил для её реализаций. Это даёт полную свободу и никакой стандартизаций в её исполнении. Я скажу даже больше — одну и ту же Сетку можно реализовать самыми разными способами. Если вы уже читали про Сетку то могли заметить что каждый автор начинает с новой стороны углубляясь далеко в детали, это мягко говоря вводит в замешательство. К счастью начали появляться Grid Systems — CSS библиотеки для работы с Сеткой. И на их примере можно очень быстро освоить базовые принципы этой техники.

Я думаю не имеет смысла писать о всех аспектах Сетки, информацию о ней вы можете спокойно найти в Интернете. Я предлагаю создать свою простенькую Grid System.

Для начала надо усвоить что сетка состоит из колонок и промежутков между ними. Основных величины три — это ширина сетки, ширина колонки, и ширина промежутка между колонками. Ширина колонок зависит от их количества.

Давайте попробуем сделать сетку шириной 950 пикселей в 16 колонок с промежутками в 10 пикселей, выходит что одна колонка должна быть шириной 50 пикселей. Уяснив все величины мы открываем любой известный нам графически редактор и создаём макет. К Сетке так же можно добавить отступы с лева и с права, допустим по 20 пикселей и того получается макет шириной 990 пикселей. Мой пример посмотреть можно здесь.

Теперь можно начать создавать нашу библиотеку. Как и большинство CSS библиотек наша нуждаетса в глобальном сбросе, я предлагаю CSS Reset от Эрика Майера, сохранив reset.css создадим grid.css в который сразу же можем добавить метод для чистки контейнеров содержащих плавающие блоки — Clear Fix. Первое что нам нужно это правило для контейнера который будет содержать все наши колонки. Ширина каждого контейнера ровна ширине нашей сетки.
.container {
margin: 0 auto;
width: 950px;
}

Теперь можно добавить правило для наших колонок, оно содержит ширину и отступ. Отступ выполняет роль промежутка(gutter) между колонками.
.column {
float: left;
margin-right: 10px;
overflow: hidden;
width: 50px;
}

Для последней колонки отступ не нужен, для этого добавим правило и для неё:
.last { margin-right: 0; }

Наши контейнеры содержат колонки, колонки это плавающие блоки, поэтому их приходится чистить. Чтобы избежать лишних .clearfix в разметке можно применить это правило и для контейнеров:
.clearfix:after, .container:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix, .container { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix, * html .container {height: 1%;}
.clearfix, .container {display: block;}
/* End hide from IE-mac */

Теперь можно приступить к нашим колонкам. Колонки могут быть шириной в две три и так далее. Для этого мы можем применить к ним следующие правила:
.span-1 { width: 50px; }
.span-2 { width: 110px; }
.span-3 { width: 170px; }
.span-4 { width: 230px; }
.span-5 { width: 290px; }
.span-6 { width: 350px; }
.span-7 { width: 410px; }
.span-8 { width: 470px; }
.span-9 { width: 530px; }
.span-10 { width: 590px; }
.span-11 { width: 650px; }
.span-12 { width: 710px; }
.span-13 { width: 770px; }
.span-14 { width: 830px; }
.span-15 { width: 890px; }
.span-16 { width: 950px; margin-right: 0; }

В принципе это всё что нужно для реализаций Сетки, можно ещё добавить обёртку и класс для просмотра Сетки с макетом. Создадим main.css и добавим в него:
.wrapper {
margin: 0 auto;
width: 990px;
}
.overlay {
background: transparent url(overlay.png) repeat-y scroll top left;
}

Вот как может выглядеть вёрстка:
<div class="wrapper overlay">
	<div class="container">
		<div class="column"></div>
		<div class="column span-4"></div>
		<div class="column span-11 last"></div>
	</div>
</div>


Я думаю для начала этого достаточно.
Мой пример можно посмотреть здесь или скачать здесь.

Вот парочка замечательных ресурсов о Сетке:
Страничка Марка Балтона и его Five Simple Steps to designing grid systems.
Страничка Коя Вина и его Grid Computing… and Design, а так же Grids Are Good.
Сайт посвящённый вёрстке с Сеткой Design By Grid.
Похожие публикации
Самое читаемое Разработка

Комментарии (98)

  • +4
    по-моему очень нужная ссылка - http://code.google.com/p/blueprintcss/ , отличный css-фреймворк построенный как раз на grid-модели. в его дистрибутиве есть также ruby-script позволяющий задать параметры ширины колонок, сетки в целом, etc, если вы хотите что-либо отличающееся от умолчальных настроек.
    • 0
      Я знаю. Но этот отдельный рассказ ;) Я планирую написать о Blueprint CSS и о его возможностях.
      • 0
        не откладывай только, очень даже интересная тема, ждем.
      • 0
        фишка в том, что вы код повыдирали из blueprintcss :) с .clearfix это очень заметно :)
        • 0
          Перед тем как написать статью я изучил много Grid Systems и почти везде используется clearfix.
          • 0
            clearfix, мягко говоря, не самое универсальное и удачное решение...
            • 0
              мотивируйте, пожалуйста.
              • 0
                Мотивация уже лейтмотив всего Хабра :-)
      • 0
        Не написали еще?:)
    • 0
      Ещё есть YUI Grids. Порой кажется, что YUI слишком уж монстроподобна, но если разобраться — вполне можно использовать.
      • 0
        Жутко раздражают название правил - doc hd bg pd. Я бы из всей YUI отметил бы инструмент для расчёта Сетки.
      • 0
        Да, но его лучше использовать в больших проектах. В этом проект похож на EXTjs - хороший, функциональный, но жирный)
    • +1
      А ещё я бы отметил YAML: Yet Another Multicolumn Layout - http://www.yaml.de/
      Но как мне показалось - не такой удобный как BlueprintCSS
      • 0
        у YAML можно использовать резиновый дизайн, что, IMHO лучше
        • 0
          у YAML лицензия неподходящая, надо бэклинк ставить или баксы дать
        • 0
          В Blueprint CSS резиновый дизайн в разработке и вполне возможно что войдёт в следующий релиз.
  • 0
    Чтобы чистить плавающие блоки, достаточно родителю указать { overflow:hidden;width:100%; } (т.е., любую ширину, но это обязательно). И не надо никаких клирфиксов. Это прошлый век :)
    • 0
      Согласен, но именно для Сетки больше подходит такой подход. Так как контейнер может содержать не только колонки но и другие плавающие блочные элементы. Для данной реализаций .clearfix вообще можно избежать, веди .column и так содержит свойство overflow: hidden и имеет фиксированную ширину. Просто как всегда не повредит.
      • 0
        Такой подход избыточен. Не стоит плодить сущности сверх необходимости.
        • –1
          Только если это не библиотека.
          • 0
            Мы из разных религий, да. Я-то думал, библиотека — это набор нужных вещей, а не всё-что-только-можно-да-побольше-побольше.
            Вот здесь, кстати, довольно внятно рассказывается про очистку.
            • –1
              .clearfix полезная вещь. К томуже в моём примере он не засоряет разметку.
              • 0
                Не вижу его пользы, когда есть более простое решение, работающее везде и, к тому же, не использующее хаки.
                • –1
                  В любом случае здесь речь идёт о Сетке и как она реализована не имеет значения, значения имеет сама концепция. Я согласен с вами что этот способ очистки блоков гораздо проще. Просто речь здесь идёт о библиотеки, clearfix правило которое в ней используется, применять его или нет ваше - решение ;)
                  • 0
                    В данном случае вы предлагаете реализацию концепции в виде библиотеки. Строить библиотеку на устаревших и неверных решениях — плохой подход.
                    • 0
                      Назовите хотя бы одну причину почему clearfix хуже?!
                      • 0
                        1. Использует хак
                        • 0
                          Ну ка давайте раскажите в каком месте это хак, то он делает не так?
                          • 0
                            Вот здесь:
                            content: ".";
                            И здесь:
                            /* Hides from IE-mac \*/
                            • 0
                              как уже ответил private_face, есть случаи когда невозможно задать для блока "width: 100%, overflow: hidden" например, если есть dropdown меню. Всегда в таких случаях использую content "." и для ИЕ height: 1%. Можно ставить zoom: 1, но оно не валидно...
                              • 0
                                Ширину можно указывать и в пикселях, и в em.
                              • 0
                                content: "." использовать для всех браузеров.
                                Для ie через conditional comment можно подключать отдельный стиль с zoom: 1;

                                height: 1% - выглядит ужасно :(
                • НЛО прилетело и опубликовало эту надпись здесь
                  • 0
                    Zoom тоже можно. Width — это привычка :)
                  • 0
                    Кстати, насколько я помню, "zoom: 1" не работает в IE 5.01 (насчет 5.5 — не уверен).

                    Про «к целевому блоку нельзя применять "overflow: hidden"» — +1
                    • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      И получить проблемы с overflow: hidden, когда переполнение скрывается, когда это не надо (например, если есть абсолютно позиционируемые блоки). Easy Clearing надёжнее.
  • +2
    Как раз буквально вчера наткнулся вот на такую штуку http://960.gs/
    • 0
      Тоже неплохая Grid System. ;)
  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      Друзья говорят - семантическая верстка
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          поменьше хамства, парень, коли сам уж не знаешь спецификаций.
          никаких столбцов и колонок с контентом в таблице нет. есть ряды и ячейки.
          • НЛО прилетело и опубликовало эту надпись здесь
            • +1
              если это одно и то же, то зачем ты их перечисляешь, с таким умным видом? :))

              ну а если ты не понимаешь, чем табличные столбцы отличаются от модульной сетки, то именно тебе надо постичь азы вёрстки прежде чем кого-либо тут учить
              • 0
                А ты знаешь, чем табличные столбцы отличаются от модульной сетки ?
              • 0
                my_own_parasite, Нашел вобще что сравнивать, столбцы и модульную сетку... Очередной некомпетентный аматьор на хабре ...
        • 0
          Модульная сетка не несёт никакого смысла (она лишь помогает упорядочить визуальное представление информации). Поэтому используя таблицы, вы привносите в документ ненужный смысл.
          • НЛО прилетело и опубликовало эту надпись здесь
  • +3
    ммм, как-то ничего нового не узнал ;)
    а почему верстка монгоколоночного сайта стала теперь отдельной религией? -))

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

    p.s. не хотел задеть, просто положительное настроение с утра -)
    • 0
      Если честно мне и так пришлось урезать статью больше чем на половину и оставить на мой взгляд самое главное. Про Сетку можно писать и писать...

      P.S. написал статью прежде всего из-за того что во всём рунете не нашёл ничего про Сетку.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          а что для вас - азы верстки?
          если говорим о html,css-верстке - то человек владеет предметом, это видно.

          p.s. наверное все-таки "азы верстки", Азов - это город такой -)
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              к чему бы это?
              но где вы все-таки усмотрели, что топикстартер не знает те самые азы?
              • НЛО прилетело и опубликовало эту надпись здесь
                • 0
                  Откуда ты знаешь откуда что я узнал? Я о сетке узнал ещё за долго до того как начал верстать. Я занимался 3D пять лет и там тема сетке раскрыта от и до - хочеш расскажу про UV Mapping?
        • +1
          это говорит человек написавший выше эдакий шедевр про "это таблица колонки и все такое" )
          • 0
            а собственно таблицы это не азы? Все верстальщики начинают разметку делать на таблицах, а уже потом, когда начинают понимать некоторые тонкости, переходят на верстку дивами.
            • 0
              отучаемся говорить за всех.
              • +2
                вы вот наверное сразу как узнали что существует хтмл, начали верстать дивами без использования таблиц, кросбраузерно и хорошо?
                Я в этом сильно сомневаюсь — что бы начать понимать как это работает и видеть подводные камни нужно не один сайт сверстать и методом проб и ошибок выйти уже на уровень дивов, хотя я не приверженец.
                Так что не рассказывайте мне сказки.
                • 0
                  Я лично начал свое знакомство с верстанием с книги "XHTML b CSS 2"
                  • 0
                    И что вы сразу строили сложные интерфейсы при помощи только дивов и не делали каркас для первых сайтов на таблицах?

                    И почему у многих складывается мнение что в спецификации xhtml не может быть таблиц?
                    • 0
                      С первых страниц автор меня погрузил в стандарты и правила. Я сидел днями и учился делать колонки на дивах, таблицы только для вывода табличных данных.
                      Сейчас я уже сразу смотря на макет вижу кучу дивов, я даже не могу себе представить как это на таблице делается, ведь тогда идет просто захламление кода. Как в анекдоте про верстальщика в поезде "td td td td"
                      • +2
                        Стандарты — это хорошо, но что нестандартного в таблице и что есть табличные данные? Изображения и текст не являются ими? А ведь из них и строится сайт
                        Я например предпочитаю верстать смешанным методом, хотя могу и только дивами.
                        А по поводу захламленности кода с таблицами, то это не всегда, иногда больше хлама дают дивы.
                        • 0
                          Совету проникнуться XHTML ибо я смотрю не понимаете вы всех вкусностей. Не надо забывать и об XML...
                          • 0
                            Вы не правы. Верстаю только xhtml, так как давно проникся, я говорю о том что xhtml это не только дивы — это тот же html но более строгий.
                            Кстати вы лукавите говоря о том что с самых первых проектов верстаете без таблиц. Заглянул в ваш жж и увидел "ваш второй сайт" и там используются таблицы, кстати в том случае очень просто обойтись без них.
                          • 0
                            Ну а XML как исключает <table>?

                            Вы в общем-то умные вещи говорите, но немного преувеличено и пытаетесь уже просто оперировать терминами.
                            • –1
                              xml — исключает, но это совсем не одно и тоже что xhtml и нужен он немного для другого
                              • +1
                                Я это все понимаю. Мы же говорим в контексте верстки страниц.
                              • 0
                                XHTML это и есть XML. В чистом виде XML вообще ничего не исключает так как ничего и не знает о элементах которые в нём содержатся, до тех пор пока мы не применим DTD или Schema к документу.
                                • 0
                                  С тем что xml ничего не знает — согласен. А вот с тем, что xml и xhtml одно и то же нет. xhtml - расширеный html, с более строгими правилами по поводу вложенности тегов и их закрытия (я про 1.0), тоесть соответствие стуктуре xml.
                                  • 0
                                    Не с более строгими правилами, а с правилами XML! И в каком месте XHTML расширенный? Там больше элементов? Или может он всё таки расширяет HTML 4? А как он расширяет?
                                    • 0
                                      Расширенный — расширенный правилами. html он не расширяет.По поводу правил xml мы говорим об одном и том же, только разными словами.
                • 0
                  Я вот с HTML познакомился через Fireworks. Рисуешь - режешь, а он тебе генерирует HTML на таблицах. И везде работает именно так как нарисовал. Давно это было конечно. А сейчас со мной работают два парня по 18 лет и они вообще не понимают как можно было верстать на таблицах :)
                • 0
                  да, представь себе. мой первый сайт был на дивай и ифреймах. правда там была одна таблица - главное меню в соответствии с моей "гениальной" дизайнерской задумкой на дивах кроссбраузерно было не сверстать.
            • 0
              да что вы говорите; я научилась верстать дивами раньше чем вообще узнала теги табличной разметки, видимо преподаватель грамотный попался
          • НЛО прилетело и опубликовало эту надпись здесь
  • –2
    Верстка сеткой конечно интересная методика, но обоснованное ее применение — очень уж редко встречается.
    • НЛО прилетело и опубликовало эту надпись здесь
      • –2
        вот-вот, и я о том же
      • 0
        кхе, если мы уж совсем оторвемся от способов реализации, то совсем не важно каким кодом будут верстаться колонки на сайте.
        грамотный верстальщик сам определит табличками ему верстать либо дивами, либо смешанным способом.

        p.s. вы какой-то озлобленный ортодокс.
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            не вижу в топике противоречия здравому смыслу.
            вижу только ваши нервы, нервные клетки не восстанавливаются.
            • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                хамите парниша (с)
          • 0
            здравым смыслом фанатики, как правило, пренебрегают :)
        • 0
          > если мы уж совсем оторвемся от способов реализации, то совсем не важно каким кодом будут верстаться колонки на сайте.

          Просто реализации на дивах уделено половина статьи. Я тоже пративник таких извращений.

          ЗЫ. Хамишь пока толко ты, «парниша».
  • +1
    Может я чего не понимаю, но зачем вытаскивать лишний код ради универсализации? Такое решение подойдет для какого-нибудь CSS фреймворка или большого проекта с общим файлом стилей.
  • 0
    Макетная сетка может быть виртуальной: http://harisov.livejournal.com/70420.htm…
  • 0
    Я уже очень давно делаю всё на колонках, это как само собой разумеющееся.
    А набор готовых классов считаю делать неразумным. Только если в очень уникальных случаях.
  • 0
    А как быть с тем, что страница не «тянется»?
    • 0
      Можно реализовать чтобы тянулась. Почитай у Марка Балтона ссылка в конце топика.
  • 0
    как раз недавно за полчаса применил Blueprint как основы простой темы к Друпалу.

    http://akzhan-mdev.mhost.ru/.masterflow/release-1.1

    P.S.: сейчас гляну, какие есть сетки для резинового лэйаута.
  • 0
    реализация таблицы на дивах :)
    • 0
      Реализация Сетки на дивах ;)
  • 0
    Grid and Design — лучшее средство для верстки по сетке.
  • 0
    хм.. по поводу целесообразности использование Сетки у меня есть возражение: как часто вы видете макет нарисованный по сетке? чаще всего встречаю нарисованный от балды дизайн

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