minmax()
minmax()
`minmax()` é uma função do CSS Grid que dá a uma linha ou coluna tanto um tamanho mínimo quanto um máximo.
Outro exemplo
Uma grade de casos usa `repeat(auto-fit,minmax(min(18rem,100%),1fr))`. Quatro cartões compartilham uma linha no desktop, enquanto um cartão se ajusta a 320px sem fazer a página transbordar. Um nome de cliente muito longo quebra dentro de seu cartão em vez de alargar a faixa.
Partes principais
- 01tamanho mínimo da faixa
- 02tamanho máximo da trilha
- 03Distribuição de espaço disponível
Use-o quando
Use-o para dar limites flexíveis às trilhas da grade em vez de escrever uma largura de coluna diferente em cada ponto de interrupção.
Não o use quando
Não coloque um valor flexível como `1fr` no slot mínimo. Também verifique o tamanho mínimo automático do conteúdo.
Nome usado no código
grid-template-columns: repeat(auto-fit, minmax(minimum, maximum)) Antes de lançar
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with minmax() (minmax()). User context: Uma grade de casos usa `repeat(auto-fit,minmax(min(18rem,100%),1fr))`. Quatro cartões compartilham uma linha no desktop, enquanto um cartão se ajusta a 320px sem fazer a página transbordar. Um nome de cliente muito longo quebra dentro de seu cartão em vez de alargar a faixa. Design concept to apply: minmax() (minmax()). Why it fits: Use-o para dar limites flexíveis às trilhas da grade em vez de escrever uma largura de coluna diferente em cada ponto de interrupção. Do not use it when: Não coloque um valor flexível como `1fr` no slot mínimo. Também verifique o tamanho mínimo automático do conteúdo. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Um documento formal ainda pode ser rascunho, release candidate ou versão final. Cheque o status e o suporte no navegador ou plataforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Conferir este pedido
Review how minmax() (minmax()) is used now. Definition: `minmax()` é uma função do CSS Grid que dá a uma linha ou coluna tanto um tamanho mínimo quanto um máximo. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.