SWCore
42
SWCore /
CSS /
Bloco que se adapta (sw-caixa)
Bloco que se adapta (sw-caixa) CSS
O mesmo cartão vira coluna, linha ou linha com ação — pelo espaço que ELE tem, não pelo tamanho da tela.
O que é
Um card de serviço na barra lateral estreita fica em pé; no conteúdo largo fica deitado — o mesmo HTML. Acaba a media query por componente.
Como funciona
Container queries (container-type: inline-size + @container), Baseline amplo. O sw-caixa-lado já vem com 3 formas: coluna (< 36rem), imagem + texto (≥ 36rem) e imagem + texto + ação (≥ 60rem). Para regras próprias, escreva @container (width >= 40rem) { ... } dentro de um sw-caixa.
Exemplos
Mesmo cartão, três espaços
Ao vivo
Corte + barba
R$ 60 · 45 min
Corte + barba
R$ 60 · 45 min
Corte + barba
R$ 60 · 45 min
<div sw-caixa>
<article sw-caixa-lado>
<img src="servico.webp" alt="">
<div><h4>Corte + barba</h4><p>R$ 60</p></div>
<button sw-btn="pri">Agendar</button>
</article>
</div>
Atributos
sw-caixa
o bloco vira referência de tamanho
sw-caixa-lado (dentro)
layout pronto que muda com o espaço
Limitações — o que ele não faz
Nenhuma.
