Как проверить сетку карточек CSS Grid на узком экране и длинных заголовках

Ограничения ширины и содержимого

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

Причина не только в количестве колонок. У грида есть поведение по умолчанию, при котором содержимое старается сохранить свою минимальную ширину. Если внутри карточки лежит непрерывное слово, браузер может посчитать, что элемент нельзя ужать без переполнения. Тогда колонка расширяется, даже если вы уже написали grid-template-columns: repeat(3, 1fr). Поэтому проверка должна охватывать сразу три уровня: ширину колонок, способность самих карточек сжиматься и перенос проблемного текста.

Практический вывод здесь такой: сетку нельзя считать проверенной только потому, что она красиво выглядит на десктопе. Для узкого экрана полезно исходить из мобильного сценария и явно задавать поведение на нескольких ширинах. Такой подход совпадает с распространенной практикой mobile first: сначала одна колонка, потом две, потом три, если места действительно хватает.

Учебная сетка с проблемным заголовком

Учебный пример. Ниже — минимальный стенд для проверки в обычном браузере. Среда выполнения: полный HTML-файл, открытый локально в Chrome, Firefox или Edge. Вторая карточка специально содержит длинное непрерывное слово, чтобы спровоцировать переполнение.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Проверка CSS Grid</title>
</head>
<body>
  <div class="page">
    <div class="cards">
      <article class="card">
        <h3>Короткий заголовок</h3>
        <p>Небольшое описание карточки.</p>
      </article>

      <article class="card">
        <h3>Суперсверхдлинноенепрерывноесловобезпробеловидефисовдляпроверкисетки</h3>
        <p>Эта карточка нужна, чтобы поймать скрытое горизонтальное переполнение.</p>
      </article>

      <article class="card">
        <h3>Средний заголовок с пояснением</h3>
        <p>Третий элемент нужен для проверки реального ряда из трех карточек.</p>
      </article>
    </div>
  </div>
</body>
</html>

* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 Arial, sans-serif; background: #f6f7fb; }
.page { padding: 16px; }
.cards {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  max-width: 992px;
  margin: 0 auto;
}
.card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #d7dbe7;
  border-radius: 12px;
  background: #fff;
}
.card h3 {
  margin: 0 0 12px;
  font-size: 1.125rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: normal;
}
.card p { margin: 0; }

@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

Для проверки именно на телефоне или в мобильной эмуляции важен тег viewport в примере выше. Без него браузер может считать страницу шире экрана, и тогда брейкпоинты сработают не в тех условиях, которые вы хотите проверить на узком устройстве.

В этом примере важны три решения. Первое: у контейнера на старте одна колонка, а не попытка уместить три карточки любой ценой. Второе: у самой карточки стоит min-width: 0, чтобы она могла реально сжиматься внутри грида. Третье: заголовок получил overflow-wrap: anywhere, поэтому длинное слово переносится, а не выталкивает колонку за край экрана.

Какие свойства удерживают сетку в пределах экрана

Частая ошибка — менять только число колонок и ждать, что этого хватит. На самом деле горизонтальное переполнение может остаться даже в одной колонке, если тексту некуда переноситься. Поэтому полезно разделять роли свойств. grid-template-columns управляет раскладкой. min-width: 0 разрешает элементу стать уже своего содержимого. overflow-wrap: anywhere говорит браузеру, что слово можно разорвать в любой точке, если иначе строка не помещается.

Почему я использую именно minmax(0, 1fr), а не просто 1fr? Потому что минимальное значение в 0 делает поведение колонок предсказуемее при сложном содержимом. Это особенно заметно, когда внутри карточек позже появляются вложенные блоки, кнопки, длинные ссылки или фрагменты кода. В учебной задаче можно обойтись и без этого, но для проверки макета лучше сразу заложить более устойчивый вариант.

Отдельно стоит проверить отступы и зазоры. Если у вас экран 320 пикселей, а у страницы по 16 пикселей внутренних отступов слева и справа, под контент остается 288 пикселей. Это не ошибка, а нормальная арифметика: 320 - 16 - 16 = 288. На такой ширине длинный заголовок обязан переноситься внутри этих 288 пикселей. Если он этого не делает, проблема уже не в брейкпоинте, а в свойствах самого текста или вложенного элемента.

Проверка на нескольких ширинах

Чтобы проверка была не на глаз, а с понятным результатом, удобно пройтись по четырем ширинам: 320, 480, 768 и 1024 пикселя. Это не универсальный стандарт, а удобный учебный набор. Он позволяет увидеть крайний узкий случай, переходную мобильную ширину, две колонки и полноценные три колонки. В инструментах разработчика можно включить эмуляцию устройства и менять ширину вручную.

Для быстрой проверки можно открыть консоль и выполнить маленький тест. Он не показывает причину проблемы, но сразу отвечает на главный вопрос: есть ли у страницы горизонтальное переполнение сейчас.

(() => {
  const root = document.documentElement;
  return {
    viewport: root.clientWidth,
    scrollWidth: root.scrollWidth,
    hasHorizontalOverflow: root.scrollWidth > root.clientWidth
  };
})();

В нашем учебном примере результат после исправлений должен быть таким: на ширинах 320, 480, 768 и 1024 свойство hasHorizontalOverflow возвращает false. Это и есть проверяемый результат. Он практичен, потому что его можно воспроизвести в любом браузере и сразу связать с конкретными правками в CSS.

Когда изменения сетки недостаточно

Если вы уже добавили min-width: 0, перенос слов и разумные брейкпоинты, а горизонтальный скролл остался, ищите проблему глубже. Чаще всего виноват не сам grid-контейнер, а вложенный элемент с фиксированной шириной, white-space: nowrap, длинной ссылкой, кнопкой без переноса или медиаэлементом без ограничения по ширине. Тогда изменение только grid-template-columns ничего не решит.

Полезная последовательность проверки такая: сначала смотрите, есть ли переполнение у всей страницы; потом выделяете проблемную карточку; затем проверяете дочерние элементы в DevTools и их вычисленные стили. Если видите фиксированную ширину вроде width: 400px внутри карточки при экране 320 пикселей, причина становится понятной сразу. Для изображений и других широких блоков обычно помогает ограничение max-width: 100%. Для текста — отказ от nowrap и настройка переноса.

Итоговая схема проверки проста: сначала делаете мобильную одну колонку, потом расширяете сетку на 2 и 3 колонки, затем убеждаетесь, что каждая карточка может сжиматься и что длинный заголовок действительно переносится. Если эти три уровня проверены вместе, сетка из трех карточек перестает быть хрупкой и ведет себя предсказуемо даже с неудачным контентом.

Если хотите отдельно подтянуть именно такие задачи, можно посмотреть сохраненное описание каталога курса по frontend-разработке. В нем упомянуты Flex и Grid, адаптивная и кроссбраузерная верстка, а также DevTools — это напрямую связано с проверкой и отладкой подобных макетов.