minmax()
minmax()
`minmax()` è una funzione di CSS Grid che conferisce a una riga o colonna sia una dimensione minima sia una dimensione massima.
Un altro esempio
Una griglia di casi utilizza `repeat(auto-fit,minmax(min(18rem,100%),1fr))`. Quattro schede condividono una riga sul desktop, mentre una scheda si adatta a 320px senza far traboccare la pagina. Un nome cliente molto lungo va a capo all'interno della sua scheda invece di allargare la traccia.
Parti principali
- 01Dimensione minima della traccia
- 02Dimensione massima della traccia
- 03Distribuzione dello spazio disponibile
Usalo quando
Usalo per dare alle tracce della griglia limiti flessibili invece di scrivere una diversa larghezza di colonna a ogni punto di interruzione.
Non usarlo quando
Non mettere un valore flessibile come `1fr` nello slot minimo. Controlla anche la dimensione minima automatica del contenuto.
Nome usato nel codice
grid-template-columns: repeat(auto-fit, minmax(minimum, maximum)) Prima di spedire
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: Una griglia di casi utilizza `repeat(auto-fit,minmax(min(18rem,100%),1fr))`. Quattro schede condividono una riga sul desktop, mentre una scheda si adatta a 320px senza far traboccare la pagina. Un nome cliente molto lungo va a capo all'interno della sua scheda invece di allargare la traccia. Design concept to apply: minmax() (minmax()). Why it fits: Usalo per dare alle tracce della griglia limiti flessibili invece di scrivere una diversa larghezza di colonna a ogni punto di interruzione. Do not use it when: Non mettere un valore flessibile come `1fr` nello slot minimo. Controlla anche la dimensione minima automatica del contenuto. 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): Un documento formale può ancora essere una bozza, un release candidate o la versione finale. Controlla il suo stato e il supporto per browser o piattaforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Controlla questa richiesta
Review how minmax() (minmax()) is used now. Definition: `minmax()` è una funzione di CSS Grid che conferisce a una riga o colonna sia una dimensione minima sia una dimensione massima. 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.