Адаптивний каталог не обов’язково потребує десятка контрольних ширин. Часто достатньо правильно описати мінімальний розмір картки, дозволити колонкам змінювати кількість і не забороняти вмісту стискатися. Розглянемо список матеріалів: зовнішня сітка вирівнює картки, а всередині кожної картки рядок із категорією та часом читання використовує Flexbox.
Вибирайте за зв’язками між елементами
Grid зручний, коли потрібне спільне вирівнювання за рядками та колонками. Flexbox добре працює для одного напрямку: панелі кнопок, рядка метаданих або вертикального набору елементів. Це не заборона переносити flex-елементи на нові рядки. Відмінність у тому, що кожен перенесений рядок Flexbox розподіляє простір самостійно, без спільних колонок з попереднім.
Коли ви задаєте кожному flex-елементу складну формулу ширини лише для збігу з рядком вище, варто спробувати Grid. І навпаки: для двох коротких підписів, які потрібно рознести до країв картки, повна система колонок може бути зайвою. Обидва інструменти можуть працювати в одному компоненті.
Почніть зі звичайного списку
Порядок матеріалів у HTML має бути змістовним ще до застосування CSS. Він визначає читання й клавіатурну навігацію. Не маскуйте невдалий порядок за допомогою властивості order або довільного переставляння областей сітки. Для кожної картки достатньо заголовка з посиланням, короткого опису та метаданих.
<ul class="cards">
<li class="card">
<h2><a href="/css/kaskad-i-spetsyfichnist/">Каскад CSS</a></h2>
<p>Як знайти правило, яке визначає оформлення.</p>
<p class="meta"><span>Основи</span><span>6 хв</span></p>
</li>
<li class="card">
<h2><a href="/css/vlasni-vlastyvosti/">Власні властивості</a></h2>
<p>Кольори та відступи без зайвого дублювання.</p>
<p class="meta"><span>Практика</span><span>6 хв</span></p>
</li>
</ul>Дозвольте сітці обрати кількість колонок
* { box-sizing: border-box; }
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;
margin: 0;
padding: 0;
list-style: none;
}
.card {
min-width: 0;
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: .75rem;
overflow-wrap: anywhere;
}
.card h2 { margin-block: 0 .75rem; }
.meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: .5rem 1rem;
}
.card img { max-width: 100%; height: auto; }Функція minmax() задає нижню та верхню межі розміру колонки. Тут 16rem — бажаний мінімум картки, а min(100%, 16rem) дозволяє їй стати вужчою в дуже тісному контейнері. Верхня межа 1fr розподіляє доступний простір між колонками. Значення auto-fit прибирає порожні треки, щоб наявні картки могли зайняти вільне місце.
Цей приклад не потребує медіазапиту для самої кількості колонок. Контрольні ширини все одно можуть знадобитися для інших рішень: зміни меню, розташування великої ілюстрації чи щільності таблиці. Обирайте їх за моментом, коли вміст перестає читатися, а не лише за назвами моделей телефонів.
Чому сторінка раптом ширша за екран
Довга адреса або нерозривний ідентифікатор можуть створити більший мінімальний розмір, ніж ви очікували. Автоматичний мінімум flex- і grid-елемента часто залежить від його вмісту. Властивість min-width: 0 дозволяє конкретній картці стискатися, а overflow-wrap: anywhere дає довгому тексту місце для переносу.
Не лікуйте таку помилку правилом overflow-x: hidden на всій сторінці: воно може просто обрізати недоступний текст або індикатор фокусу. Для справжньої таблиці чи широкого фрагмента коду доречний окремий контейнер із горизонтальним прокручуванням. Прокручуватися має цей контейнер, а не весь документ.
Думайте про контейнер, а не тільки про екран
Той самий список може стояти на всю ширину сторінки або в бічній колонці. У другому випадку широке вікно не означає, що картці доступно багато місця. Запропонована сітка розраховує колонки з доступної ширини свого контейнера, тому її легше повторно використати в іншій частині сайту. Перевірте обидва варіанти перед тим, як додавати виняток для конкретної сторінки.
Окремо вирішіть, як поводиться остання неповна група карток. У цьому прикладі вони можуть розтягуватися, і це нормально для текстових матеріалів. Якщо для вашого каталогу потрібна інша поведінка, опишіть її як вимогу, а не підганяйте ширину кожної картки випадковим числом. Аналогічно, однакова висота рядка не означає однакову довжину описів: зайвий текст краще відредагувати або дозволити йому зайняти більше місця.
Після зміни відступів знову перевірте мінімальну ширину. Внутрішні поля й межі також займають місце, навіть коли зовнішня сітка виглядає правильно.
Перевірка на незручному вмісті
Зменшуйте вікно плавно, а не тільки до двох готових пресетів. Додайте найдовший заголовок, один дуже короткий опис, масштабування браузера та збільшений системний шрифт. Пройдіть посилання клавішею Tab: видимий порядок має збігатися з порядком читання. Переконайтеся, що метадані переносяться, зображення не розтягуються, а окрема картка не диктує ширину всьому списку.