Шаг 14: Медиа‑запросы (адаптивность)

@media (max‑width: 768px) меняет стили для мобильных. Это делает сайт адаптивным.

Код примера

<style>
  .container { width: 100%; max-width: 900px; margin: 0 auto; padding: 0 16px; }
  @media (max-width: 768px) {
    .container { padding: 0 12px; }
    .grid-container { grid-template-columns: 1fr; }
  }
</style>
<div class="container">
  <div class="grid-container">
    <div style="background:#eee; padding:16px;">Адаптивная колонка</div>
    <div style="background:#eee; padding:16px;">Адаптивная колонка</div>
    <div style="background:#eee; padding:16px;">Адаптивная колонка</div>
  </div>
</div>