Модульные сетки в веб-дизайне | Базовая часть. Сетка 12 колонок для фотошопа


Bootstrap сетка, PSD

При создании дизайна сайтов в Adobe Photoshop не обойтись без использования какой-либо системы сеток. Можно создать сетку самостоятельно, используя направляющие, либо воспользоваться уже готовым, проверенным решением - готовой сеткой Bootstrap в формате PSD. Не смотя на то, что дефолтные размеры Bootstrap сетки несколько стандартизируют дизайн, данный вариант успешно используют в своей работе огромное количество веб-дизайнеров по всему миру. Кроме того, такая стандартизация позволяет максимально быстро выполнять HTML верстку созданного макета, что неминуемо приводит к ускорению работы над проектом в условиях разработки сайтов на потоке или создания шаблонов.

Поделиться

Твитнуть

Поделиться

Класснуть

Плюсануть

Запинить

Параметры стандартной Bootstrap сетки в PSD формате:

  • Общая ширина рабочей области: 1920px;
  • Ширина контейнера с отступами: 1170px;
  • Ширина колонки без отступов: 68px;
  • Ширина отступа (Gutter): 15px;
  • Система сетки: 12-ти колоночная.

Расстояние между колонками и некоторые размеры могут иметь погрешность +/- 1px в связи с тем, что некоторые нечетные величины не могут быть поделены поровну. Но это некритично в масштабах разработки PSD макета.

Правила работы с PSD сеткой Bootstrap

Существуют определенные правила работы с Bootstrap сеткой. Некоторые начинающие веб-дизайнеры не учитывают в своей работе эти правила, в результате чего возникает непонимание между верстальщиком и дизайнером, в случае, если над проектом работает команда. Bootstrap сетка в PSD формате для создания дизайна сайта разрабатывалась основываясь на "физических" свойствах сетки CSS фреймворка Bootstrap и дизайнер должен придерживаться определенных правил для исключения излишних коллизий в процессе разработки.

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

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

3. После разделения макета на колонки и блоки, промежутки (Gutters) между ними не могут быть использованы для размещения каких-либо элементов дизайна или контента сайта.

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

Последний пункт очень важен, так как многие начинающие веб-дизайнеры боятся выходить за рамки Bootstrap сетки и дизайн, в большинстве случаев, получается довольно однообразный и скучный. Помните, что направляющие Bootstrap сетки необходимы вам только для разметки блоков сайта, которые необходимо упорядочить в соответствии с системой сеток, это может быть разделение макета на базовые логические части - сайдбар + контент, определение элементов блока, таких, как айтемы карусели, секции новостей и так далее. В остальном, не стоит ограничиваться рамками сетки и делать визуализацию только по направляющим. Однако если вы создаете дизайн определенной секции или блока в соответствии с системой Bootstrap сетки, обязательно придерживайтесь правил из пунктов 1,2,3 выше.

Скачать Bootstrap PSD

Премиум уроки от WebDesign Master:

webdesign-master.ru

Модульная сетка в веб-дизайне | Данил Фимушкин

Модульная сетка

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

Понятие модульной сетки

Модульные сетки — система верстки, которая строит определенную композицию вашего сайта. Не совсем понятно, понимаю 🙂 Разбираю на примере. Заходи на сайт 960 и нажми на любом представленном сайте «show grid».

пример модульной сетки

Пример модульной сетки

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

Преимущества использования модульной сетки

1. Легче создавать дизайн. Не нужно долго думать что и где расположить, долго и хаотично перемещая элементы по макету. Есть определенные направляющие, которые уже интуитивно подсказывают где лучше расположить элементы. Можно добавлять элементы не перегружая дизайн всего макета.2. Чёткая и быстрая вёрстка. Когда верстальщик будет делать из твоего макета работающий сайт, то используя готовые css-генераторы, он может быстро сделать готовый макет для верстки. Когда я начинал делать макеты сайтов, для меня модульная сетка была непонятной штукой. Сейчас я понимаю, что она упрощает жизнь и дизайнеру, и верстальщику. Кстати, модульные сетки используются не только при верстке сайтов, но и в полиграфии для верстки журналов, книг и прочих печатных изданий.

Примеры модульных сеток

Начну с упрощенного примера для верстки книги. У вас есть квадрат, который разделен на 9 клеток. модульная сетка для книгиКак использовать это в работе? Для статьи мне надо распределить картинки и текст по квадратами. Получается некая композиция. модульная сетка для книги В вебе та же история. Некоторые помимо вертикальной модульной сетки дополнительно используют горизонтальные вспомогательные. Использовать горизонтальную модульную сетку или нет, решать тебе. За её отсутствие никто тебя ругать не будет.

модульная сетка для веба

Пример модульной сетки для веба с вертикальными и горизонтальными вспомогательными линиями

Классический пример использования модульной сетки — интерфейс операционной системы windows.

модульная сетка для операционной системы

На телефоне видно использование модульной сетки в 4 колонки

Какую модульную сетку использовать для своих сайтов

На сайтах могут быть использованы разные версии модульной сетки. Нет универсального решения использования какой-то одной сетки. Количество колонок надо выбирать исходя из задач проекта. На сайте apple может показаться, что используется всего одна колонка. На самом же деле, тут есть модульная сетка, но её использовали очень грамотно. Информации в интернете всё больше и больше, поэтому не стоит отвлекать читателя от предоставляемой информации. На этом сайте при прокрутке текст чередуется с картинкой. Никакие картинки не отвлекают слева или справа. Это очень удобный дизайн для блога, например, или для лендинга, где вам надо довести клиента до покупки не перегружая его лишней информацией.

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

Я использую 960 grid system, кто-то говорит, что таким разрешением мониторов уже никто не пользуется. Не соглашусь. Некоторые сидят с рабочих ноутов с разрешением 1024 px, поэтому есть смысл разрабатывать дизайн сайтов начиная с 960 px, дальше вы можете сделать сайт большего размера, увеличив модульную сетку. Нельзя игнорировать людей с 960 px, потому что конверсия в покупки с маленьких мониторов бывает больше, чем с больших. На больших (домашних) компах люди смотрят фильмы или еще как-то себя развлекают. На работе же у большинства маленькие мониторы и в обед частенько они шастают по сайтам и совершают покупки. Сначала проанализируйте какие разрешения популярны у вашей целевой аудитории.

Скачайте с сайта архив, нажав на большую кнопку «download». В архиве есть папка «templates» нам туда.

папка templates

Открываем папку templates

Там есть файлы для всех графических редакторов, я работаю в фотошоп, поэтому открываю соответствующую папку.

модульная сетка для фотошоп

Открываем папку для Фотошоп

Здесь есть макеты с разным количеством колонок, 12, 14 и 24 соответственно. Я обычно использую 12 колонок. Открываем этот файл, в нем есть 2 слоя: 12 колонок (слой «grid») и слой фон.

модульная сетка в фотошоп

Открываем файл модульной сетки в Фотошоп

Слои модульной сетки заблокированы, чтобы их случайно не подвинуть. Если нажать ctrl + ; , то появится направляющая (на маке cmnd + ;). Нажимаем новый слой и начинаем проектировать сайт. Например так.элементарный макет сайтаНаверху шапка, слева меню, какой-то рекламный баннер под шапкой, а дальше карточки товаров. Они уже выстроены по сетке, остается только детализировать, добавить фотографии и информацию. Придавать значимость вашему проекту.

Обязательно придерживайтесь линий сетки. Чтобы изображение или текст шли четко по одной из линий модульной сетки.

Модульные сетки можно скачать готовые, поищите в интернете готовые psd файлы (или нужный вам формат для других графических редакторов). Есть и другой способ построения модульных сеток. Нужно скачать  action (плагин) для фотошопа, который будет строить модульную сетку, согласно вашему проекту. После установки плагина (это нужно сделать 1 раз) просто нужно будет нажать alt+9, выбрать нужную сетку из панели, нажать play и сетка построится. Затем вам нужно будет просто выровнять ваш сайт по этой сетке.

На мой взгляд, готовый файл с модульной сеткой гораздо проще, чем использование плагина. Возможно, это потому что, когда я начал применять модульные сетки, не знал о его существовании 🙂

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

fimushkin.com

Модульная сетка для веб-дизайнеров | Блог про веб-дизайн ONJEE

По долгу службы я частенько сталкиваюсь с исходниками других дизайнеров. Хороших и неопытных, дотошных и не очень. И знаете что? У многих из них есть одна большая беда — элементы в макетах прыгают из стороны в сторону. Поэтому сегодня мы поговорим о том, что такое модульная сетка, где ее скачать и как ей пользоваться.

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

Для этого и существует модульная сетка. Она помогает предотвратить хаос элементов. Поэтому, когда она отсутствует, или представляет из себя вот это…

Модульная сетка

… на веб-странице правит произвол и путаница. Списки, кнопки, блоки и менюшки раскиданы как попало. Верстается все так же тупо и запутанно. А это не есть гуд.

Что из себя представляет модульная сетка

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

В подавляющем большинстве случаев она бывает 12, 16 и 24 колоночной. Если вы делаете свободный сайт с большим количеством «воздуха» между элементами, стоит использовать 12 колоночную сетку. Если же вы делаете сайт, где должно быть over дох*уя информации на квадратный пиксель (привет forex), стоит использовать 24 колоночную сетку.

Где раздобыть модульную сетку

Существует 2 легальных способа ее получения в домашних условиях:

1. Нарисовать.

Долго, дорого (если учитывать человеко/часы, за которые вам платят деньги) и не всегда аху*енно (зависит от опытности дизайнера в этом вопросе). Я никогда этого не делал. На мой взгляд — лишний геморой и тупая работа.

Нужно высчитывать процентное соотношение столбцов и отступов, выставлять направляющие. Брр. В общем, я бы не стал рекомендовать этот способ.

2. Скачать

Зачем рисовать, если можно взять уже готовое? Причем не украсть, а скачать бесплатно. В этом вопросе, такой принцип работает на 100%. Существует огромное количество, как готовых сеток, так и всевозможных генераторов.

Давайте обратим внимание на некоторые из них:

960 grid

Конечно же. Каждый дизайнер наверняка знает этот сайт. Здесь можно бесплатно скачать сетку под разрешение 960 px практически для всех возможных редакторов (Photoshop, Illustrator, Corel…)

Modular Grid Pattern

Довольно интересный сервис, который позволяет создавать сетки под любые разрешение экрана, хоть 2500px. Идеально подойдет для адаптивного дизайна.

Grid Calculator

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

Эти сервисы я с уверенностью вам рекомендую. Но можно поступить еще проще. Существует немало расширений для фотошопа, которые позволяют строить сетку прямо в окне программы. Я могу порекомендовать одно единственное:

Guideguide

Одно из самых популярных расширений. Полностью бесплатно (но вы можете сделать пожертвование). Рекомендации по установке (English) можно прочитать здесь . Если в двух словах и на русском: установите Adobe Extensios Manager (бесплатно), установите расширение, перейдите в Window > Extensions > GuideGuide, наслаждайтесь.

В заключении

Не стоит пренебрегать построением макета по модульной сетке. Это облегчит жизнь вашим коллегам дизайнерам и вашим коллегам верстальщикам. Если появились вопросы — милости прошу в комментарии.

onjee.ru

13 готовых шаблонов модульных сеток

Файлы в форматах PSD и Sketch для создания грамотного дизайна.

Что такое сетка знает каждый дизайнер. По поводу ее использования есть много споров, но ее необходимость неоспорима. Если вы мало знакомы с этой темой, то рекомендуем изучить ее. Создание сетки очень важный процесс, однако, в сети существует множество готовых шаблонов для дизайна сайтов и приложений. Ниже вы найдете 13 готовых модульных сеток для Photoshop и Sketch. Все файлы бесплатны, скачивайте и создавайте ваш дизайн грамотно.

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

www.iamdesigner.pro

Колоночная вёрстка: сетка 960Grid

thumbr.jpg

Сегодня мы поговорим колоночной (или сеточной) разметке сайта, и в частности о системе Grid960 и одном из её вариантов.

960gs.jpg

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

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

Сетка 960

960gs.gif

Вот уже несколько лет самой популярной является «Grid960«. Её можно накладывать как в браузер, так и в любой графический редактор, в котором вы работаете над сайтом. Вообще, используется разное количество колонок, 12, 16, и вроде даже 24 есть. Наиболее популярна схема с 12 колонками:

  • 12 колонок — 60px каждая
  • Каждая колонка имеет margin:0 10px — образуются промежутки по 20px
  • В итоге получается сетка 940px

В подвесной системе этой сетки сомневаться не приходится, и можно легко разбить страницу на любое соотношение колонок — 9х3, 3х3х3, 4х4х4х4, 10х2 и т.д.

Но эта сетка уже устаревает, т.к. сейчас увеличиваются и разрешения экрана, и размеры шрифтов, и появляются новые варианты разметки страницы.

Сетка 978

Более оптимизированная для разрешения 1024*768 — Сетка 978 (12 столбцов @ 54px шириной, 30px пробелы.)

978-grid.gif

Для получения этой и любой другой сетки — воспользуйтесь генератором сеток

Разумеется, в конце концов, всё зависит от Вас и от проекта.

________________

А вообще главное в нашем деле — хорошая и надёжная техника. Найти для себя что-то новое, а может, что-то подобрать для будущей работы можно на блоге о компьютерах и решении их проблем!

Naikom » Кодинг » Вёрстка

naikom.ru

Сетка в веб-дизайне как основа хорошего макета интернет-сайта

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

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

Аспекты хорошего макета

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

Отзывчивость и гибкость

Разбитие контент на определенные колонки помогает веб-разработчикам понять, каковы будут их действия на различных размеров экранах. Также можно создать «гибкую решетку» в HTML и CSS, основой которой будут проценты, а не фиксированные значения. Можно простым образом уменьшить количество некоторых колонок, преобразовать контент.

Выравнивание и баланс

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

Единообразность

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

Наладка и применение системы сеток

Давайте рассмотрим образец сайта, на котором используется система сеток.

На рисунке можно увидеть сетку, состоящую из 12 колонок, которая является самым популярным макетом в веб-дизайне. Используя такое количество колонок, можно с легкостью разделить контент на четыре, три или две колонки. Если же взять макет на 16 колонок, то можно получить больше возможностей, но при этом возникнет и ряд сложностей в работе с дизайном. Неплохим вариантом, который можно использовать, является макет на восемь колонок, но он не даст разбить контент больше, чем на три колонки. Поэтому профессиональные веб-дизайнеры рекомендуют использовать сетку на 12 колонок.

Основной принцип создания собственного макета с сеткой

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

К примеру, ширина страницы будет составлять 1140 пикселей, сетка будет состоять из 12 колонок, а пробелов будет 11. Первоначально необходимо понять, какой будет ширина пробелов: например, 12 пикселей.

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

Настройка кривых в Photoshop

Это довольно скучная и затратная в плане времени задача. Для того, чтобы это процесс был быстрее и веселее, большинство дизайнеров рекомендуют использовать Photoshop CC 2014. В нем можно найти новую функцию, которая называется Guide Layout. Она даст возможность в короткое время создать нужную сетку с вертикальными и горизонтальными кривыми.

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

Применение сеток в разработке дизайна макета для веб-проекта может быть очень полезна. Эта практика является довольно простой и популярной среди большинства дизайнеров.

Примеры веб-проектов, которые основаны на сетке

Рассмотрим довольно интересные примеры веб-сайтов и то, как используется сетка, осуществляется ее наполнение текстом.

webformula.pro

Модульные сетки в веб-дизайне | Базовая часть – Skill Up Design

Привет! В сегодняшней статье разберёмся с сетками в веб-дизайне.

Одна из самых первых вещей, о которой задумывается веб-дизайнер, после брифования клиента и наброска будущего сайта — это выбор сетки. В этом нет сложностей, но есть тонкости.

Именно набросок будет первой вещью, которую делает веб-дизайнер, потому что уже исходя из того, что мы там нарисовали, мы подбираем сетку. Набросок — это по сути прототип т.е. черновая идея сайта изображённая в виде блоков (модулей) на обычной бумажке.

Для начала давайте разберёмся, что такое модуль?

Модуль — любая единица измерения. Модуль устанавливается для того, чтобы измерить что либо по отношению к чему-либо. Т.е. грубо говоря 1 сантиметр — это модуль, по отношению к метру. Вот примерно так же сайт строится из модулей. Модуль — это мельчайшая единица и составляющая дизайна сайта.Сперва просто запомним, что сетки больше всего используются для печатной продукции (т.е. журналы, газеты). С середины ХХ века именно по модульной стеке стало строится большинство печатной продукции, потому что это очень удобно и очень круто.

Для чего вообще нужна модульная сетка?

Простым языком о модульных сетках

По сути вот эти Guides в Photoshop (View —> New Guide) и есть направляющая сетка, именно для веб-дизайна. Чтобы убрать направляющую включаем Rules (линейку), берём Move Tools (V) и перетаскиваем Guide (направляющую линию) на линейку сбоку или сверху в зависимости от того горизонтальный или вертикальный Guide (направляющая линия). Так же можно и получить новую направляющую, нажать на линейке и вытащить её в рабочую область.

Почему просто вот такая сетка не подходит? Иногда бывает набираете «скачать сетку для фотошопа», «grid psd». Скачиваете открываете, а там сама сетка, в таком виде как на скриншоте и если вы нажимаете Ctrl+H, чтобы сетка из Guide lines отображалась, а её нет, значит это просто векторные колонки. Векторные колонки, Карл! Обычная картинка.

Простым языком о модульных сетках 2

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

Простым языком о модульных сетках 3

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

Простым языком о модульных сетках 4

Вот как это выглядит без сетки.

Простым языком о модульных сетках 5

Каковы плюсы сетки:

  • Задаёт стандарты расположения объектов — выверенные отступы;
  • Шаблонизирует и снижает вероятность ошибок при отрисовке дополнительных страниц;
  • Делает визуально приятным дизайн, за счёт соблюдения пропорций и структуры;
  • Задаёт логику и облегчает работу целой команды над одним макетом;
  • На основе дизайна построенного на сетках, проще работать над адаптивностью дизайна.

Виды сеток

  1. Блочная — это модуль, его трудно назвать сеткой, просто 1 модульПростым языком о модульных сетках 6
  2. Колоночная — её называют модульной, но это по сути колоночная сетка, состоящая из колонокО модульных сетках простыми словами 7
  3. Модульная сетка — в основном в печатной продукции, поскольку есть формат листа. В веб-дизайне не всегда понятно какая будет ширина экрана и высота у пользователя.О модульных сетках простыми словами 8
  4. Иерархическая — когда модули располагаются основываясь на своём дизайнерском чютье.О модульных сетках простыми словами 9

Что такое 960 Grid?

Называется так, потому что ширина сетки 960px и вся соль её использования в том, что она гарантирует, что ваш дизайн правильно отобразиться и на обычном мониторе и на планшете.

Если вы откроете свой сайт на мониторе 2560px или не дай бог 4K, то он будет ютиться на экране в виде маленькой колоночки.

О модульных сетках простыми словами 10

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

  • 1170px — под обычный формат, под широкие мониторы;
  • 970px — под ноутбуки и старые мониторы;
  • 750px — под планшеты;
  • 480px и 320px — под мобильные телефоны и смартфоны.

Если дизайнер не криворукий, то делая дизайн для 1170px, ему не составит труда отрисовать его и под остальные разрешения 970px, 750px, 480px и 320px.

Практические примеры:

1. Сайт в 3 колонкиО модульных сетках простыми словами 11О модульных сетках простыми словами 12

2. Сайт в 4 колонки 4 колонки. Сайт в чистом виде сетка.Большая картинка это блок в 2 колонки. И объединяются либо левые 2 колонки, либо правые.О модульных сетках простыми словами 13

А чуть ниже видно, что дизайнер разбивает ритм и берёт 2 центральные колонки.О модульных сетках простыми словами 14

Проверяем адаптивность. Для широкого формата это 6 колонок, примерно на широкоформатном мониторе:О модульных сетках простыми словами 15

4 колонки. Такое отображение будет для планшета:О модульных сетках простыми словами 16

3. 18-ти колоночная сеткаЕсли не накидывать сетку, то кажется, что используется 3 колонки.О модульных сетках простыми словами 17

При этом в 12 колонок какие-то элементы вписывают, а какие-то нет, поэтому 12 колонки не подходят. :О модульных сетках простыми словами 18

Более детальный разбор показал, что здесь используется 18-ти колоночная сетка, распознать это помог наименьший элемент страницы оранжевые кнопки, это по сути одна колонка, размножив их, мы получили 18 колонок:О модульных сетках простыми словами 19

4. 12-ти колоночный макет.4 большие, каждая из 4-х делится на 3 внутри. Всё абсолютно линейно. Даже кнопочки меню и то попадают в эту сетку. И хотя меню не в ритме (ритм в данном случае по 3 колонки), но всё таки они в ширину сетки попадают.О модульных сетках простыми словами 20

При подготовке статьи использовались материалы из видео «Основы веб дизайна #1 — модульные сетки (Grid Systems)» Youtube канал PsForceRu.

skillupdesign.ru