Считайте колонки по ширине контейнера с учётом промежутков
Попробуйте прямо здесь
Отвечает Gemma 3 12B — модель подобрал сервис
Доступ без VPN
Русский интерфейс
Оплата рублями по факту
Зачем
Зачем это нужно
Проверьте содержимое карточек, которое не умеет сжиматься
Добавьте промежуточные ширины и увеличение текста к проверке крайних экранов
Вопросы
Частые вопросы
Как запросить адаптивную сетку с измеримыми условиями?
Предложи CSS Grid для карточек: минимум 280px на колонку, gap 16px, число колонок по доступной ширине. В сетке не меньше четырёх карточек. Известна ширина содержимого контейнера без padding: 320px и 900px. Нужны одна и три колонки соответственно, а при ширине меньше 280px — сжатие без переполнения. Объясни minmax и auto-fit, дай проверки длинного слова и масштаба 200%. Страницу не запускай.
Какие размеры указать для разбора адаптива?
Передайте HTML и CSS сетки, ширину окна, ширину контейнера и его padding. Уберите закрытый контент и секреты из примеров. Сначала задайте минимальную ширину карточки, затем проверьте переходы колонок и переполнение у себя в браузере.
Как проверить число колонок при 320px и 900px?
Проверяйте сетку минимум с четырьмя карточками: пустые треки auto-fit схлопываются. При ширине содержимого 320px ожидается одна колонка. При 900px три карточки минимум по 280px и два промежутка по 16px помещаются, четыре — нет. Проверьте также контейнер 240px: выбранное правило должно позволять одной карточке сжиматься.
Почему проверки только на телефоне и большом мониторе мало?
Ошибка может появиться между выбранными ширинами из-за длинного текста или размеров вложенного элемента. Масштабирование меняет доступное пространство. Число колонок не доказывает отсутствие обрезанного текста и недоступных элементов управления.
Рядом
Соседние страницы каталога
Дальше — весь каталог задач: поиск по названию, темы и фильтры.