Урок 33. Решения: Media queries: min/max-width, ориентация и prefers-*

Возможное решение (задание 2 + 3)

Не единственный правильный вариант, но он показывает рабочую идею урока без лишних зависимостей. Подход — mobile-first: база описывает узкий экран, min-width добавляет колонки.

<section class="gallery">
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
  <article>6</article>
</section>

/* база: телефон — 1 колонка */
.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

/* планшет: с 768px — 2 колонки */
@media (min-width: 48rem) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

/* десктоп: с 1024px — 3 колонки */
@media (min-width: 64rem) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

/* тёмная тема под системную настройку */
:root { --bg: #ffffff; --fg: #0f172a; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f172a; --fg: #e2e8f0; }
}
body { background: var(--bg); color: var(--fg); }

Как это выглядит на трёх ширинах

Те же 6 карточек, три превью под три диапазона (реальное переключение делает @media по ширине окна).

📱 < 768px

.gallery { grid-template-columns: 1fr; }

💻 768–1023px

@media (min-width: 48rem) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

🖥️ ≥ 1024px

@media (min-width: 64rem) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}