HTML\CSS → Сетки страниц на HTML5

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

На сегодня существует несколько способов управлять потоком и строить сетки страниц, через:

  1. float
  2. inline-block
  3. flexbox (новая технология)
  4. табличную верстку (считается устаревшим);

Для создания сеток в большинстве случае использую блочные элементы с float. Элементы inline-block используются реже. Причины:

  1. Блочно-строчные элементы не поддерживают старые браузеры, например, IE7 и младше.
  2. Блочно-строчные элементы ведут себя как текст, поэтому если в коде есть пробел между элементами, то он отображается и на странице.

flexbox — это новая и очень мощная технология для построения сеток, но к сожалению, её поддержка браузерами ещё достаточно слабая.