Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 38 из 53 · 8 мин
container-type, container-name, @container и единицы cqi.
В ленте карточка широкая — фото слева. В сайдбаре узкая — фото сверху.
Медиазапрос смотрит на экран, а тут важна ширина места. Это @container.
container-typecontainer-type: inline-size — дети могут спрашивать ширину этого элемента.container-namecontainer-name: card — чтобы обращаться к конкретному контейнеру.@container@container (min-width: 400px) { … } — как @media, но про ширину контейнера.<style>
.slot { container-type: inline-size; } .card { display: grid; gap: 6px; background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; } @container (min-width: 220px) { .card { grid-template-columns: 60px 1fr; } } .pic { background: #c8763a; min-height: 30px; }
</style>
<div class="slot"><div class="card"><div class="pic"></div><div>Ручка — широкое место, фото слева</div></div></div>cqi5cqi — 5% ширины контейнера.Раскладка страницы — @media. Раскладка компонента — @container.
Сделай .slot контейнером (container-type: inline-size) и добавь @container (min-width: 400px), где у .card grid-template-columns: 120px 1fr.
Выберите один ответ.
Чем @container отличается от @media?
Выберите один ответ.
Что нужно задать обёртке, чтобы работал @container?
Проверяем состояние обучения…