CSS

Адаптивная сетка без лишних брейкпоинтов

Grid для структуры, Flexbox для небольших групп элементов.

Адаптивная страница должна сохранять порядок чтения и удобство действий при изменении ширины окна. Начните с небольшого экрана: один столбец, читаемый текст и элементы управления, которым хватает места.

Сетка карточек

CSS Grid удобно использовать, когда важны строки и столбцы. auto-fit вместе с minmax позволяет менять число колонок в зависимости от свободного места. Минимум ниже ограничен шириной контейнера, чтобы карточка не создавала горизонтальную прокрутку.

.articles {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.25rem;
}
.article { min-width: 0; }
pre { overflow-x: auto; }

Когда нужен Flexbox

Для строки тегов или группы кнопок обычно достаточно display: flex и flex-wrap: wrap. Выбирайте механизм по структуре содержимого, а не по привычке.

Проверка

Откройте страницу на ширине 320 пикселей и увеличьте масштаб браузера. Убедитесь, что длинный заголовок переносится, кнопки доступны, а прокрутка примера кода не растягивает всю страницу. Не меняйте визуальный порядок так, чтобы он расходился с порядком элементов в HTML.