Каркас страницы: контейнер и сетка

Каркас (layout) — это крупные части страницы и то, как они расположены: шапка, основное содержимое, подвал, колонки. Pico даёт для этого всего три класса: container, container-fluid и grid.

Шапка, содержимое, подвал

Страница строится из семантических тегов <header>, <main> и <footer> прямо внутри <body>. Класс container ограничивает ширину каждой части и центрирует её:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<header class="container">
  <h1>Блог Анны</h1>
</header>
<main class="container">
  <p>Здесь будут записи блога и проекты.</p>
</main>
<footer class="container">
  <small>© 2025 Анна Петрова</small>
</footer>

Три части выровнены по одной левой границе и получили вертикальные отступы. Pico добавляет отступы сверху и снизу у body > header, body > main и body > footer, поэтому важно класть их прямо в <body>.

Контейнер на всю ширину

Фиксированный container удобен для текста: длинные строки на широком мониторе трудно читать. container-fluid подходит для панелей и галерей. В бесклассовой сборке эти классы не нужны — ширину ограничивает сам Pico.

Сетка из колонок

Класс grid раскладывает прямых потомков в колонки равной ширины. Сколько потомков, столько и колонок:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<div class="grid">
  <div>
    <h4>Вёрстка</h4>
    <p>Адаптивные страницы из макета.</p>
  </div>
  <div>
    <h4>Блог</h4>
    <p>Заметки о CSS раз в неделю.</p>
  </div>
  <div>
    <h4>Консультации</h4>
    <p>Разбор вашего сайта за час.</p>
  </div>
</div>

На экране шире 768 пикселей блоки стоят в три колонки, на узком — друг под другом. Окно превью на странице урока бывает уже 768 пикселей — тогда колонки стоят друг под другом; в вашем index.html на широком экране они встанут в ряд.

Чего нет в сетке Pico

Сетка намеренно простая: нет классов для ширины колонки, порядка или точек перелома. Если нужна колонка в два раза шире соседней, допишите своё правило:

.grid.with-sidebar {
  grid-template-columns: 2fr 1fr;
}

Добавьте его в свой файл стилей, подключённый после Pico, и поставьте блоку class="grid with-sidebar". Помните, что это правило действует на любой ширине — на телефоне его стоит обернуть в медиазапрос.

Частая ошибка

Положить <main class="container"> внутрь лишнего <div>. Отступы Pico рассчитаны на селектор body > main, и вложенный <main> прилипнет к шапке без вертикальных полей. Держите шапку, содержимое и подвал прямыми детьми <body>.