Crie uma consulta de contêiner com nome e ajuste a prévia

Dê um nome ao contêiner, escolha container-type e uma condição de largura e arraste a prévia: o indicador mostra a largura da caixa de conteúdo e se a consulta corresponde agora, e a exportação é a regra @container completa. Intervalos mantêm os números digitados: se o mínimo passa do máximo nada corresponde e o indicador avisa.

Funciona localmente no seu navegador

Ver categoria: Frontend e design (34)

· container-type · container-name · @container

CONTROLES DE CONSULTA

container-type

min-width (px)

max-width (px)

620px

PRÉVIA DE TAMANHO

01Contrato da API

02Saída do build

03Verificação em execução

04Notas de versão

EXPORTAR CSS

Como criar e testar uma consulta de contêiner

Dê um nome ao contêiner, escolha container-type e uma condição de largura e arraste a prévia: o indicador mostra a largura da caixa de conteúdo do contêiner e se a consulta corresponde naquele momento. O painel de exportação traz o CSS completo: a declaração .component-shell com container-type e container-name, mais o bloco @container que troca a grade pelo número de colunas escolhido.

Todos os números deste guia foram medidos nos testes: o indicador concordou com a grade renderizada nos 11 estados de teclado, os oito padrões são card-shell / inline-size / min / 480 / 760 / 620 px / 3 colunas / 16 px, e o botão Copiar CSS gravou exatamente o texto do painel (comparado pelo clipboard).

Informe um nome de contêiner (até 32 caracteres) e escolha container-type: inline-size ou size. O nome vira minúsculas, espaços e sinais viram - e um dígito inicial recebe o prefixo x-.

Escolha a condição — largura mínima, largura máxima ou intervalo de largura — e digite os valores min-width / max-width que você quer na regra.

Arraste Largura da prévia entre 220 e 900 px. O indicador muda enquanto você arrasta: «Corresponde» significa que a regra da grade está aplicada na prévia e «Não corresponde» que não está.

Ajuste Colunas quando corresponder (1–4) e Espaçamento (0–64 px). Os dois valores são limitados a essas faixas na prévia e no CSS exportado.

Clique em Copiar CSS e cole o resultado; Redefinir devolve card-shell, inline-size, min, 480, 760, 620 px, 3 colunas e 16 px.

O que a prévia mede, quais números o CSS mantém e o que a ferramenta não cobre

O que a prévia mede

O indicador conta a caixa de conteúdo do contêiner: os 13 px de padding de cada lado ficam de fora, então uma prévia de 620 px mostra 620px. A consulta mede essa mesma caixa, e por isso os dois batem. «Corresponde» coloca os quatro cartões no número de colunas escolhido; «Não corresponde» os deixa em uma única coluna.

O palco também limita a prévia: numa janela de 1360 px o controle chega a 900, mas a prévia para em 878 px e o indicador informa 878px, não o valor pedido. container-type: size mantém a altura que a prévia já tinha (204 px em uma linha, 352 px empilhada) para a demonstração não desabar com a contenção de tamanho.

Os números que você digita são os que saem

Os dois campos de largura são independentes. Um intervalo exporta os dois valores como escritos: mín 1000 com máx 300 gera (min-width: 1000px) and (max-width: 300px), que nunca corresponde, e o indicador diz «Não corresponde» em vez de reescrever a regra em silêncio. O modo máximo usa só o campo máximo, então min-width não vaza mais para ele.

Colunas e espaçamento são limitados ao que os controles permitem: digitar 7 colunas exporta repeat(4, minmax(0, 1fr)) e 80 px exporta gap: 64px, os mesmos valores que a prévia renderiza. Copiar CSS põe esse texto exato no clipboard e Redefinir devolve os oito padrões.

O que a ferramenta não faz

Ela cobre um contêiner nomeado e apenas condições de largura: min-width, max-width ou intervalo. Não há consultas de estilo, de estado de rolagem, de altura isolada nem um segundo contêiner, e o CSS impresso é andaime de exemplo — .component-shell e .component-grid — para renomear na sua marcação.

Nada sai da página. Enquanto os controles eram movidos e o CSS era copiado nos testes, o navegador não enviou nenhuma requisição, e o trilho diz isso. As palavras do indicador estão traduzidas nos seis idiomas, incluindo o francês Correspond / Ne correspond pas e o japonês 一致 / 一致しない.