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

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

  1. слишком много размеров
  2. повтор однотипного кода
  3. нет стандарта (сложно поддерживать)

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

Фиксированное число колонок равной ширины и возможность задавать модулю ширину в виде произвольного числа колонок от 1 до максимального.

основные элементы модульной сетки

  1. container
  2. row
  3. column
  4. gutters

Сколько колонок выбрать?

Можно создавать 2-x, 3-х, 4-х колоночные сетки, но это не универсальный подход.

Наиболее популярное решение - 12 колонок

  • 12 / 1 = 12
  • 12 / 2 = 6
  • 12 / 3 = 4
  • 12 / 4 = 3
  • 12 / 6 = 2
  • 12 /12 = 1

Технологии создания модульной сетки

Собственный class для каждой ширины

классы для 12 колонок

ширина в колонках имя класса max классов в row
12 col-12 1
11 col-11 1
10 col-10 1
9 col-9 1
8 col-8 1
7 col-7 1
6 col-6 2
5 col-5 2
4 col-4 3
3 col-3 4
2 col-2 6
1 col-1 12

See the Pen css modules grid combination 1 - 12 by Gennadiy (@Gorbulin) on CodePen.

float-left

See the Pen css modules grid float-left by Gennadiy ( @Gorbulin) on CodePen.

Достоинства

  • поддержка старыми браузерами
  • много работающего кода, требующего поддержки
  • bootstap-3 как стандарт индустрии в прошлом

Недостатки

  • сложности с равной высотой колонок
  • карьера с морально старыми проектами

inline-block

See the Pen css modules grid display: inline-block by Gennadiy ( @Gorbulin) on CodePen.

Достоинства

  • поддержка старыми браузерами

Недостатки

  • сложности с равной высотой колонок
  • сложности в вертикальным выравниваем

display: table

See the Pen css modules grid display: table by Gennadiy ( @Gorbulin) on CodePen.

Достоинства

  • поддержка старыми браузерами
  • лояльность поисковых механизмов // в отличие от html тегов table в качестве разметки
  • колонки равной высоты

Недостатки

  • специфические CSS правила для таблиц
  • необходимость вертикального выравнивания
  • на практике используется крайне редко

flex

See the Pen css modules grid display: flex by Gennadiy ( @Gorbulin) on CodePen.

Достоинства

  • колонки равной высоты
  • много работающего кода, требующего поддержки
  • bootstap-4 как стандарт индустрии в настоящем
  • карьера с современными проектами

Недостатки

  • в ближайшее время должен уступить технологии grid
  • плохая поддержка старых браузеров

Брейкпоинты

Медиаправила и новые имена классов для колонок

See the Pen css modules grid responsive by Gennadiy (@Gorbulin) on CodePen.

bootstrap-4

  • col-:    < 576px
  • col-sm-: ≥ 576рх
  • col-md-: ≥ 768рх
  • col-lg-: ≥ 992рх
  • col-xl-: ≥ 1200рх

Верстка на bootstrap-4

See the Pen css modules bootsrap grid by Gennadiy (@Gorbulin) on CodePen.

Документация на русском к bootstrap-4

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

Верстка макетов на первом изображении перейти к задачам