Bento Grid
Griglia Bento
Una griglia bento impacchetta riquadri di dimensioni diverse in un solo layout. Le campate più grandi mostrano quali contenuti contano di più.
Un altro esempio
Una panoramica del prodotto dà al grafico in diretta un riquadro grande. I numeri meno importanti ottengono riquadri più piccoli.
Parti principali
- 01Outer constraint
- 02Content and spacing model
- 03Computed size or reflow result
Usalo quando
Usalo quando il contenuto ha un vero ordine di importanza. Lascia che il layout mostri quell'ordine.
Non usarlo quando
Non posizionare mai le tessere a caso. Può rompere l'ordine di lettura e aggiungere stile senza significato.
Nome usato nel codice
grid-column: span n 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 Griglia Bento (Bento Grid). User context: Una panoramica del prodotto dà al grafico in diretta un riquadro grande. I numeri meno importanti ottengono riquadri più piccoli. Design concept to apply: Griglia Bento (Bento Grid). Why it fits: Usalo quando il contenuto ha un vero ordine di importanza. Lascia che il layout mostri quell'ordine. Do not use it when: Non posizionare mai le tessere a caso. Può rompere l'ordine di lettura e aggiungere stile senza significato. 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): Nessun singolo standard ufficiale controlla l'intero termine. Il suo significato può cambiare tra team, piattaforme o framework. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Controlla questa richiesta
Review how Griglia Bento (Bento Grid) is used now. Definition: Una griglia bento impacchetta riquadri di dimensioni diverse in un solo layout. Le campate più grandi mostrano quali contenuti contano di più. 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.