История верстки: от таблиц к Flexbox и Grid

Если вы когда‑нибудь задавались вопросом, почему сайты выглядели так, как выглядели 10‑20 лет назад, ответ прост – менялась сама верстка. В начале веба всё делалось в таблицах, потом пришли блочные модели, а сейчас правят Flexbox и Grid. Давайте вместе пройдем этот путь и поймём, как каждый этап влиял на дизайн и удобство разработки.

Таблицы и <table>: первые попытки разместить контент

В 90‑х годах, когда браузеры только начали поддерживать HTML, разработчики использовали <table> не только для табличных данных, но и для построения макетов. Таблицы позволяли фиксировать высоту и ширину ячеек, а значит – расположить блоки «как надо». Главный минус – плохая гибкость и сложность в обслуживании. Малейшее изменение требовало правки кода таблицы, а адаптивность была практически невозможна.

Появление CSS и блочный поток: новые возможности

Конец 90‑х принес CSS 1, а с ним возможность отделять структуру от оформления. Появились блочные элементы (div, section) и свойства float, clear. Теперь можно «плюхнуть» блок влево или вправо, а потом «очистить» поток. Это дало большую свободу, но всё ещё требовалось кучу хака‑классов, чтобы решить задачи выравнивания. К 2005‑м годам большинство сайтов уже отказывались от таблиц, но верстка всё ещё была «клеевой» – множество float и отрицательных маргинов.

С приходом CSS 2.1 и свойств display:inline-block, position:absolute разработчики получили более точный контроль над расположением элементов. Появились первые публичные фреймворки – Bootstrap 2, Foundation – которые стандартизировали сетки и ускорили процесс сборки страниц.

Однако приход 2010‑го годов ознаменовал настоящий прорыв: Flexbox. Этот модуль позволил избавиться от «плавающих» колонок, задать направление, выравнивание и распределение свободного пространства одной строкой кода. С Flexbox можно быстро построить центрирование как по горизонтали, так и по вертикали – задачу, которой раньше нужны были десятки строк CSS.

К 2017‑му году появился CSS Grid – двухмерная система, позволяющая задавать как строки, так и колонки одновременно. Grid стал идеальным решением для сложных макетов, где нужно контролировать обе оси. Вместе с Flexbox они сделали практически любой дизайн доступным без «хака».

Сегодня верстка выглядит иначе: почти каждый проект начинается с гибкой сетки Grid или Flexbox, а «раньше» упоминаются только в контексте исторических примеров. Появились инструменты автоматизации – PostCSS, CSS‑in‑JS, а также новые подходы, такие как CSS Modules и Tailwind CSS, которые ещё сильнее упрощают работу.

История верстки учит, что технологии развиваются быстро, но фундаментальные принципы – семантика HTML, отделение контента от стилей, адаптивность – остаются прежними. Если вы только начинаете, советую сначала освоить базовый HTML и CSS, а потом плавно переходить к Flexbox и Grid. Не бойтесь экспериментировать, ведь каждый новый подход решает старую проблему проще.

И помните: хороший код – это тот, который легко изменить. Когда вы будете добавлять новые блоки, ваш сайт должен адаптироваться без «клея» и хака. В этом и состоит главный вывод истории верстки – от таблиц к современным системам, цель всегда одна: сделать контент доступным и красивым на любом экране.