Принципы верстки: что нужно знать каждому
Верстка – это способ превратить макет в работающую страницу. Если ты когда‑нибудь пытался собрать свой первый сайт и запутался в коде, этот материал спасёт тебя. Здесь мы разберём простые правила, которые помогут писать чистый HTML и CSS без лишних проблем.
Базовые правила построения сетки
Самый надёжный способ разместить элементы – использовать сетку. Сетка делает структуру предсказуемой и легко меняется. Начни с контейнера max-width: 1200px и отцентрируй его margin: 0 auto. Затем дели пространство на колонки. Самый популярный вариант – 12 колонок, но можно брать и 4‑6, в зависимости от проекта.
Для создания колонок лучше использовать display: flex или grid. Flex‑контейнер удобно задавать justify-content: space-between – так отступы между колонками будут одинаковыми. Если нужна более строгая система, подключи CSS‑grid: grid-template-columns: repeat(12, 1fr). Потом просто назначай элементам grid-column: span 3 или любое нужное количество колонок.
Не забывай про отступы. Вместо множества margin в разных местах, создай переменные: --gutter: 20px. Затем используй их везде. Так проще менять расстояния в будущем.
Адаптивность и гибкость
Сейчас почти все пользователи заходят с мобильных. Поэтому любой дизайн должен подстраиваться под экран. Самый простой способ – медиа‑запросы. Начни с «mobile‑first»: пишем стили для маленьких экранов, а затем добавляем @media (min-width: 768px) и @media (min-width: 1200px) для планшетов и десктопов.
При адаптивной сетке меняй количество колонок. На телефоне часто хватает одной колонки, на планшете – две‑три, на большом экране – шесть‑восемь. Это делается одним изменением в grid-template-columns. При этом контент сохраняет читаемость, а кнопки остаются удобными.
Гибкие единицы измерения, такие как rem и vh/vw, позволяют избавиться от фиксированных пикселей. Установи базовый размер шрифта в html{font-size: 100%} и используй rem для всех отступов и размеров шрифтов. Тогда при изменении базового размера всё масштабируется автоматически.
Не забывай про изображения. Добавляй атрибут srcset и sizes, чтобы браузер выбирал подходящую версию. Это ускорит загрузку и улучшит пользовательский опыт.
И ещё один важный момент: проверяй свой код в разных браузерах. Иногда свойства работают по‑разному, и небольшие поправки в префиксах спасут макет.
Подытожим: используй сетку, задавай отступы через переменные, делай мобильную версию первой, применяй гибкие единицы и проверяй в разных браузерах. Следуя этим простым принципам, ты сможешь быстро собрать чистую, адаптивную страницу, которая выглядит одинаково хорошо на любом устройстве.
