Перейти к содержанию
Educora
RU
AzərbaycancaEnglishРусскийTürkçe
Моё обучениеEducora StudioНастройки
Продвинутый22 мин9 / 10

CSS Grid и адаптивный дизайн

Строй макеты страниц из строк и столбцов с помощью CSS Grid и подстраивай их под любой экран медиазапросами и подходом «сначала мобильные».

Проверь себя
В этом уроке ты узнаешь
  • Создавать сетку с помощью grid-template-columns, единицы fr и repeat()
  • Растягивать элементы на несколько столбцов и строить макет страницы через grid-template-areas
  • Выбирать между Grid и Flexbox
  • Писать адаптивную страницу по принципу «сначала мобильные» с медиазапросами и относительными единицами

Ты открываешь один и тот же сайт на телефоне, планшете и широком мониторе: на компьютере товары стоят в три столбца, на телефоне — в один, и ничего не вылезает за край экрана. Это адаптивный дизайн. Его главные инструменты — CSS Grid (сетка из строк и столбцов) и медиазапросы; в этом уроке ты освоишь и то и другое.

CSS Grid: строки и столбцы

display: grid превращает контейнер в сетку. grid-template-columns задаёт число столбцов и их ширину. Здесь используется особая единица **fr** (fraction — доля): 1fr 2fr делит свободное место на три доли, первый столбец получает одну, второй — две. repeat(3, 1fr) — сокращение для 1fr 1fr 1fr. Как и во Flexbox, gap задаёт промежутки между ячейками.

HTML
<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .grid div { padding: 16px; text-align: center; background: #fbcfe8; border-radius: 8px; }
  .grid .wide { grid-column: span 2; background: #f9a8d4; }
  .grid .tall { grid-row: span 2; background: #c4b5fd; }
</style>

<div class="grid">
  <div class="wide">1 (span 2 columns)</div>
  <div class="tall">2 (span 2 rows)</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
Предпросмотр
Замени repeat(3, 1fr) на 1fr 2fr 1fr и посмотри, как средний столбец станет вдвое шире. Элементы сами заполняют свободные ячейки: 3 и 4 встают под первым элементом.

grid-column: span 2 растягивает элемент на два столбца, а grid-row: span 2 — на две строки. А весь макет страницы можно буквально «нарисовать» с помощью grid-template-areas: дай областям имена и расставь их по строкам в кавычках. Каждый элемент отправляется в свою область свойством grid-area.

HTML
<style>
  body { font-family: system-ui, sans-serif; margin: 0; padding: 12px; }
  .page {
    display: grid;
    grid-template-columns: 140px 1fr;
    grid-template-areas:
      "header header"
      "side   main"
      "footer footer";
    gap: 8px;
  }
  .page > * { padding: 12px; border-radius: 8px; }
  header { grid-area: header; background: #fde68a; }
  aside  { grid-area: side;   background: #bfdbfe; }
  main   { grid-area: main;   background: #e2e8f0; min-height: 90px; }
  footer { grid-area: footer; background: #d1fae5; }
</style>

<div class="page">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Main content</main>
  <footer>Footer</footer>
</div>
Предпросмотр
Измени макет: в средней строке замени "side main" на "main side" — боковая панель переедет вправо, а HTML останется прежним. Поменяй местами и ширину столбцов (grid-template-columns: 1fr 140px), иначе основной блок окажется в узком столбце шириной 140px. Селектор .page > * выбирает всех прямых потомков .page.
КритерийFlexboxGrid
Измеренияодно направление: строка или столбецдва направления: строки и столбцы вместе
Что определяет раскладкуразмер содержимогозаранее заданная сетка
Типичное применениеменю, ряд кнопок, содержимое карточкимакет страницы, галерея, сетка карточек
Они не соперники: часто общий макет страницы строят на Grid, а внутренности её частей — на Flexbox.
HTML
<style>
  body { font-family: system-ui, sans-serif; margin: 0; padding: 12px; background: #0f172a; }
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
  }
  .tile { aspect-ratio: 1; display: flex; justify-content: center; align-items: center;
          font-size: 40px; background: #1e293b; border-radius: 12px; }
</style>

<div class="gallery">
  <div class="tile">🌊</div><div class="tile">🏔️</div><div class="tile">🌳</div>
  <div class="tile">🌅</div><div class="tile">🏜️</div><div class="tile">🌋</div>
  <div class="tile">🏝️</div><div class="tile">❄️</div>
</div>
Предпросмотр
Замени 110px на 200px — столбцов станет меньше, а плитки крупнее. aspect-ratio: 1 делает каждую плитку квадратной, а внутри плитки эмодзи центрирует Flexbox.

Адаптивный дизайн и медиазапросы

Медиазапрос применяет правила CSS только при выполнении условия, например когда окно шире определённого значения: @media (min-width: 600px) { … }. Современный способ писать адаптивные страницы — подход «сначала мобильные» (mobile-first): базовые стили пишутся для маленьких экранов, а для широких добавляются дополнения через запросы min-width.

HTML
<style>
  body { font-family: system-ui, sans-serif; margin: 0; padding: 12px; }
  h1 { font-size: 1.4rem; color: #7c3aed; }
  .cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .card { padding: 14px; background: #ede9fe; border-radius: 10px; }

  @media (min-width: 500px) {
    .cards { grid-template-columns: 1fr 1fr; }
  }

  @media (min-width: 900px) {
    .cards { grid-template-columns: repeat(3, 1fr); }
    h1 { font-size: 2rem; }
  }
</style>

<h1>Mobile first</h1>
<div class="cards">
  <div class="card">One</div>
  <div class="card">Two</div>
  <div class="card">Three</div>
</div>
Предпросмотр
Ширина предпросмотра примерно равна ширине колонки урока: на компьютере ты, скорее всего, увидишь два столбца, а на телефоне — один. Замени 500px на 1500px, чтобы увидеть мобильную раскладку.
  • В <head> каждой страницы должен быть <meta name="viewport" content="width=device-width, initial-scale=1">. Без него мобильный браузер рисует страницу как для широкого экрана шириной около 980px и уменьшает её — медиазапросы работают не так, как ожидалось.
  • Вместо фиксированной width: 800px пиши max-width: 800px: на широком экране блок не станет больше 800px, а на узком сожмётся.
  • Делай изображения гибкими: img { max-width: 100%; height: auto; } — картинка никогда не вылезет за контейнер и сохранит пропорции.
  • Используй относительные единицы: rem для шрифтов, %, fr и vw для областей. font-size: clamp(1.5rem, 5vw, 3rem) увеличивает заголовок вместе с экраном, но держит его в заданных границах.
Открывает инструменты разработчика в браузере (на Mac — Cmd+Option+I)F12
В Chrome и Edge при открытых инструментах разработчика включает режим устройства — можно проверить страницу на размерах телефона и планшета (на Mac — Cmd+Shift+M)Ctrl+Shift+M

Главное

  • display: grid и grid-template-columns создают сетку; fr — доля свободного места, repeat(3, 1fr) — три равных столбца.
  • span растягивает элемент на несколько ячеек; grid-template-areas рисует весь макет именованными областями.
  • Flexbox — для одного направления, Grid — для двух; использовать их вместе — нормально.
  • «Сначала мобильные»: базовые стили — для маленьких экранов, @media (min-width: …) — дополнения для широких.
  • Метатег viewport, max-width, гибкие изображения и относительные единицы — основа адаптивной страницы.

Проверь себя

Вопросов: 10. Каждый правильный ответ приносит XP.

1 / 10
У контейнера шириной 300px задано grid-template-columns: 1fr 2fr (без gap). Какова ширина столбцов?