Обучаемся.com

Руководство по компьютеру, работа с Windows, разработка и продвижение сайтов…

Автор

Гибкая сетка в верстке

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

Это классика современного построения адаптивного дизайна, и не только современного. Любой дизайнер, который давно рисует веб-сайты знает от таком понятии, как сетка разбивки исходя с которой строится красивый с выдержкой пропорций макет. Количество колонок в сетки может быть разное, в большинстве случаев это 12 или 16, но встречается и 15, а также другое количество. Обратно все зависит от дизайнера, который рисовал макет.

Важно понимать, что размеры сетки меняются и перестраиваются в зависимости от размера экрана. То есть на небольших изменениях ширина она просто сужается, это как с десктопного монитора до размера ноутбука, а уже при смене на мобильные экраны, она кардинально перестраивается.Перестроение сетки при адаптивной версткеНа изображении четко заметно, что на мониторе ПК 4 колонны, на планшете вертикально 2, но горизонтально также 4 и на мобильных устройствах по одной. Вот так работает принцип перестроения адаптивной верстки сайта. И важно понимать. что дизайнер должен учитывать эти моменты, и если вы планируете делать адаптивный сайт, тогда вам нужно как минимум три дизайна сайта, под ПК, планшеты и мобильные устройства.

Grid System — основа

Берем за основу систему в 12 столбцов, если учитывать, что максимальная ширина страницы 100%, тогда выяснить ширину столбца очень просто 100/12=8.333333333333333% это и есть ширина в процентах одного столбца. Нам во время верстки нужны будут все 12 столбцов, а значит все их размеры в процентах. Для этого в наших стилях создаем 12 столбцов прописывая каждому свою ширину,но перед этим давайте подумаем о структуре самой страницы.

Мы уже все понимаем, что любые элементы страницы размещать нужно в основном блоке, который можно обозначить классом или идентификатором wrapper или content, давайте его и создадим в нашем html, а в стилях пропишем классы для 12 столбцов сетки. В результате у вас выйдет вот такой html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Responsive Template</title>
</head>
<body>
    <div class="container">

    </div>
</body>
</html>

В котором нам все знакомо и вот такой должен быть код в стилях, о котором сейчас более подробно поговорим:

* {
    margin: 0;
    padding: 0;
}

body{
    font: 100%/1.5em Arial, Helvetica, sans-serif;
    color: black;
}
.container {
    width: 90%;
    margin: 0 auto;
    background: #d2d2d2;
}

.container .cols {
    float: left;
    margin: 0 0 1em;
    padding: 0 1em;
    background: #fd4;
    text-align: center;
}

.container .cols.col-1 {width: 8.333333333333333%}
.container .cols.col-2 {width: 16.66666666666667%;}
.container .cols.col-3 {width: 25%;}
.container .cols.col-4 {width: 33.33333333333333%;}
.container .cols.col-5 {width: 41.66666666666667%;}
.container .cols.col-6 {width: 50%;}
.container .cols.col-7 {width: 58.33333333333333%;}
.container .cols.col-8 {width: 66.66666666666667%;}
.container .cols.col-9 {width: 75%;}
.container .cols.col-10 {width: 83.33333333333333%;}
.container .cols.col-11 {width: 91.66666666666666%;}
.container .cols.col-12 {width: 100%;}

Если с HTML все понятно, то вот CSS создает массу вопросов и догадок. Думаю, что такое .container и какие в нем свойства пояснять не стоит, а вот уже о .container .cols мы поговорим. В этом правиле прописаны свойства, которые будут применяться абсолютно ко всем столбцам нашей сетки, а мы помним, что их будет 12 у нас. Также для наглядности я задал фон каждому столбцу и отступы, ну и выравнивание текста по центру, ну и конечно они должны следовать друг за другом поэтому делаем им всем флоат.

А вот далее идет самое интересное, мы создали 12 классов для будущих столбцов верстки и указали каждому из них размер в процентах, высчитывали его очень просто, первый 8,333333333333333, второй 8,333333333333333+8,333333333333333=16,66666666666667 и т.д. В итоге имеем 12 столбцов с их размерами.

Ну раз у нас есть уже 12 колонок пора попробовать что-то сверстать, идем в наш html и верстаем примерно такую картинуВерстаем три дива по 4 колокиздесь три дива которые имеют класс колонок отвечающим 4, ибо 3*4=12, а вот так это выглядит в нашем HTML

<body>
    <div class="container">
        <div class="cols col-4">Четыре</div>
        <div class="cols col-4">Four</div>
        <div class="cols col-4">Четыре</div>
    </div>
</body>

То есть прописали три дива в которые поместили основной класс cols и дополнительный для именно этих блоков col-4, который отвечает за ширину 4 столбцов. После сохранения и перехода в окно браузера мы увидим не очень приятную вещь, а именно вот такую:Смещение блоков при версткеПочему так произошло, ведь у нашего .col-4 {width: 33.33333333333333%;}, что в умножении на три дает 100%, а дело здесь как раз в наших отступах, которые мы добавили для наших всех столбцов, а также здесь влияет принцип построения классической box модели, в которой к размерам блока добавляется еще размер margin & padding, вот такая неприятная новость.

К счастью в CSS3 есть спасительное свойство box-sizing, которое уберет вот эту проблему, прочесть об этом свойстве и его значениях можно посмотреть на замечательном сайте htmlbook, а мы просто применим это свойство абсолютно ко всем элементам нашего сайта. То есть в самое начало наших стилей, там, где стоит звездочка дописываем это свойство

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Как видите я его прописал и для движка вебкит и моз, так для подстраховки, обратно же об этих дописках можно более подробно прочесть в интернете. И теперь наша блочная система никуда не лезет и все стает в одну строку, замечательно, не так ли.

Раз уж все так идет гладко пробуем сверстать второй ряд и здесь задействуем уже не 3 блока, а давайте 4 блока используем.

<body>
    <div class="container">
        <div class="cols col-4">Четыре</div>
        <div class="cols col-4">Four</div>
        <div class="cols col-4">Четыре</div>

        <div class="cols col-3">Три</div>
        <div class="cols col-3">Три</div>
        <div class="cols col-3">Три</div>
        <div class="cols col-3">Три</div>
    </div>
</body>

Здесь мы уже прописывали класс отвечающий за столбцы размера 3, так как блоков четыре. После сохранения и просмотра в браузере мы начинаем восхищаться тем, что у нас выходит. Но я добавлю вашей радости немного расстройства, берем и в первых трех блоках внутрь второго прописываем пару строчек текста, этак на символов 200-300 и смотрим, что с этого получится в браузере.Съехала верстка блоковЧто нужно для исправления этой ситуации, а нужно сделать обертку для наших строк и задать класс row, вот так это выглядит в html:

<body>
    <div class="container">
       <div class="row">
        <div class="cols col-4">Четыре</div>
        <div class="cols col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At molestiae asperiores voluptatem animi, consequatur saepe commodi, culpa possimus praesentium dolor repellendus provident, ipsam, temporibus sint porro reiciendis eius illo recusandae?</div>
        <div class="cols col-4">Четыре</div>
      </div>
      <div class="row">
        <div class="cols col-3">Три</div>
        <div class="cols col-3">Три</div>
        <div class="cols col-3">Три</div>
        <div class="cols col-3">Три</div>
       </div>
    </div>
</body>

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

.container:before,
.container:after,
.row:before,
.row:after,
.clear:before,
.clear:after {
    content: "";
    display: table;
}
.row:after,
.clear:after {
    clear: both;
}

Теперь, после сохранения все у нас отлично работает.

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

Ну и для закрепления ваших знаний предлагаю сверстать еще несколько строк с блоками используя разные вариации, от 1 до 12 в построении строки, если кому-то трудно было уловить процесс построения кода даю ссылку на исходники уже готового html & css кода.Исходник кода в примереНа этом всем пока, хорошего вам настроения и успеха в изучении верстки.

← Гибридная версткаMedia queries →

11 Ответов в теме: Гибкая сетка в верстке

  1. Андрей says:

    Теперь наконец понял что из себя представляет сетка в верстке, а раньше имел лишь отдаленное понятие о CSS фреймворках.
    На полке давно лежит книга по верстке сайтов Джона Дакетта, так вот там описано это, но лишь общее понятие. Буду учиться верстать, спасибо за информацию!

  2. Я как-то не беспокоилась вопросом о верстке. У меня стоит простая резиновая тема и я думала, что этого достаточно. Но одинаково ли хорошо просматривается блог на ПК или смартфоне или планшете? Боюсь, нет. Озадачили Вы меня.

    • Андрей says:

      Смотрите, если у вас как минимум 12 — 15% с мобильных устройств, это стоит того, чтобы делать сайт адаптивным.

      • Проверю обязательно.

        • Error says:

          Теперь, когда вы являетесь экспертом веб-дизайна на основе сетки и 960 Grid System , вот несколько инструментов и ресурсов, с которыми вы можете ознакомиться, чтобы еще больше разобраться в этой теме.

  3. Хм, надо попробовать сразу на практике, так как некоторые нюансы ускользают, хотя статью перечитал 3 раза.
    Андрей, я вижу, вы используете CSS3. Насколько сложно освоить их после CSS2? Или может, посоветуете какие-то материалы, где доступно расписано о применении CSS3?

    • Андрей says:

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

  4. Error says:

    Теперь, когда вы являетесь экспертом веб-дизайна на основе сетки и 960 Grid System , вот несколько инструментов и ресурсов, с которыми вы можете ознакомиться, чтобы еще больше разобраться в этой теме.

  5. Evgeniya says:

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

  6. Влад says:

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *