Урок 09. Частые ошибки

📁 Раздел: Раскладка ⏱️ Время изучения: ~50 мин 🎯 Сложность: Средняя

⚡ Кратко

Grid там, где хватило бы flex; переполнение из-за длинного содержимого; забытый мобильный вариант; фиксированные колонки вместо fr.

Ошибка 1. Сетка без мобильного варианта

Как ломается: на телефоне три колонки по 80px — читать невозможно.

❌ Одно значение на все экраны

<div class="grid grid-cols-3 gap-6">…</div>

✅ Mobile-first

<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">…</div>

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

Ошибка 2. Содержимое «распирает» колонку

Как ломается: длинная ссылка или широкая таблица растягивают колонку, и появляется горизонтальная прокрутка.

https://example.com/очень/длинный/адрес/который/не/помещается

min-w-0 + truncate — колонка держит ширину

https://example.com/очень/длинный/адрес/который/не/помещается

break-words — перенос внутри слова

<div class="grid grid-cols-2 gap-3">
  <div class="min-w-0 rounded-lg bg-slate-100 p-3">
    <p class="truncate text-sm text-slate-700">https://example.com/очень/длинный/адрес/который/не/помещается</p>
    <p class="mt-1 text-xs text-emerald-700">min-w-0 + truncate — колонка держит ширину</p>
  </div>
  <div class="rounded-lg bg-slate-100 p-3">
    <p class="text-sm break-words text-slate-700">https://example.com/очень/длинный/адрес/который/не/помещается</p>
    <p class="mt-1 text-xs text-slate-500">break-words — перенос внутри слова</p>
  </div>
</div>

Почему: дорожка сетки по умолчанию не уже своего содержимого. Класс minmax(0, 1fr) уже встроен в grid-cols-*, но у самого элемента всё равно может стоять min-width: auto.

Ошибка 3. Grid ради одной строки

❌ Избыточно

<div class="grid grid-cols-[auto_1fr_auto] items-center gap-2">…</div>

✅ Проще flex

<div class="flex items-center gap-2">…</div>

Почему: для одной оси flex короче и понятнее. Grid берут, когда нужна именно двумерная структура.

Ошибка 4. Фиксированные колонки вместо fr

❌ Не адаптируется

<div class="grid grid-cols-[300px_300px_300px] gap-4">…</div>

✅ Гибко

<div class="grid grid-cols-3 gap-4">…</div>

Ошибка 5. Отступы у элементов сетки вместо gap

Классический хак из эпохи float — padding у колонок плюс отрицательный отступ у контейнера. В grid это лишнее: gap не добавляет отступ снаружи крайних элементов, поэтому компенсировать нечего.