Generatore CSS Grid
Crea layout CSS grid visivamente.
Preimpostazioni layout (10)
Trascina sulle celle per disegnare un rettangolo oppure fai clic su una cella alla volta. Ogni area con nome deve restare rettangolare.
Anteprima dal vivo
Unidimensionale: Generatore CSS Flexbox.
Crea una griglia CSS con aree denominate
Disegna una griglia di lettere per le aree del template, o scegli un preset. L'anteprima mostra ogni regione con una tonalità distinta.
FAQ
Cos’è grid-template-areas?
Un modo per assegnare nomi alle aree di un layout (header, sidebar, main…) e posizionare gli elementi per nome invece che per numero di riga. Fai clic sulle celle qui sotto per disegnare le lettere delle aree — il CSS si aggiorna in tempo reale.
Posso partire da una preimpostazione?
Sì — dieci preimpostazioni di layout, tra cui Holy grail, dashboard, magazine e app shell, caricano aree con nome con un clic.
Qualcosa viene caricato?
No. Il CSS viene generato interamente nel browser.
Ultimo aggiornamento: