IK
Interview Knowledge Book
Темы
Практика
Примеры
Песочница
EN
browser
Card layout на container query
Создайте component, который меняет grid layout по ширине container, а не viewport.
index.js
function cardColumns(containerWidth) { return containerWidth >= 360 ? 2 : 1; } const cards = [ { slot: 'main column', containerWidth: 480 }, { slot: 'sidebar', containerWidth: 280 }, ]; for (const card of cards) { console.log(card.slot.includes('main') ? 'wide cards' : 'narrow cards', cardColumns(card.containerWidth)); }
Запустить
Остановить
Сбросить