Layout e CSS Nucleo A2 · Specifica formale

CSS Grid

CSS Grid

CSS Grid è un sistema di layout per righe e colonne insieme. Può impostare aree fisse o modificarle quando lo spazio cambia.

Vedi come funziona
Potresti chiamarlo CSS Gridlayout a grigliagriglia di layout CSS

Vedi come funziona

Esempio originale svoltoCSS Grid

Un altro esempio

Una dashboard mette il grafico, il riepilogo e il pannello delle attività in aree della griglia con un nome.

Parti principali

  1. 01Outer constraint
  2. 02Content and spacing model
  3. 03Computed size or reflow result

Usalo quando

Usa CSS Grid quando gli elementi devono allinearsi in entrambe le direzioni o condividere le stesse tracce.

Non usarlo quando

Non confondere mai il layout CSS Grid con il ruolo interattivo ARIA data-grid. Risolvono problemi diversi.

Nome usato nel codice

display: grid

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.

Puoi copiare la richiesta

Outcome: Complete the task with CSS Grid (CSS Grid). User context: Una dashboard mette il grafico, il riepilogo e il pannello delle attività in aree della griglia con un nome. Design concept to apply: CSS Grid (CSS Grid). Why it fits: Usa CSS Grid quando gli elementi devono allinearsi in entrambe le direzioni o condividere le stesse tracce. Do not use it when: Non confondere mai il layout CSS Grid con il ruolo interattivo ARIA data-grid. Risolvono problemi diversi. 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 CSS Grid (CSS Grid) is used now. Definition: CSS Grid è un sistema di layout per righe e colonne insieme. Può impostare aree fisse o modificarle quando lo spazio cambia. 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.

A2
Quanto è ufficiale questo termine?

Specifica formale

Una specifica formale pubblicata e con versione definisce questo termine per lo scope tecnico elencato.

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.

Ambito
Solo ciò che la sorgente copre:nome canonico、definizione、Semantica、implementazione
stato del documento
bozza
Selezionato attivato
2026-07-30

Fonti e ambito delle prove

Fonte dell'autorità + Riferimento del termine · W3C CSS Working Group · bozza CSS Grid Layout Module Level 2 — Introduction to grid layout Introduction to grid layout Ambito: nome canonico、definizione、Semantica、implementazione Ruolo qui: Riferimento diretto al termine La fonte copre: nome canonico, definizione, Semantica, implementazione Fonte dell'autorità · W3C CSS Working Group · bozza CSS Grid Layout Module Level 2 Ambito: nome canonico、definizione、Semantica、implementazione Ruolo qui: Autorità entro i limiti dichiarati La fonte copre: nome canonico, definizione, Semantica, implementazione

Copia tu stesso

Il browser non è riuscito a copiare questo. Seleziona la richiesta qui sotto e copiala tu stesso.