Layout di avvio griglia CSS - Trucchi CSS

Questa è una raccolta di modelli iniziali per layout e modelli che utilizzano CSS Grid. L'idea qui è di mostrare ciò che la tecnica è in grado di fare e fornire un punto di partenza che può essere riutilizzato per altri progetti.

Ricorda che il supporto del browser per Grid è buono ma richiede fallback per i browser legacy. Ciò significa che un semplice copia e incolla di questi potrebbe non essere adatto per alcuni casi d'uso.

Layout del Santo Graal

Il vecchio layout classico a tre colonne in cui due barre laterali e un contenitore che contiene la copia del corpo sono inseriti tra un'intestazione e un piè di pagina a larghezza intera.

Sacro Graal flessibile

Tutto rimane intatto mentre la larghezza del riquadro di visualizzazione cambia utilizzando un contenitore di contenuti fluido.

Vedi Pen CSS Grid - Holy Grail 2 di Geoff Graham (@geoffgraham) su CodePen.

Sacro Graal reattivo

Le cose si accumulano una volta che il riquadro di visualizzazione si restringe.

Vedi la griglia CSS della penna: layout del Santo Graal - Responsive di Geoff Graham (@geoffgraham) su CodePen.

2 colonne con intestazione e piè di pagina

Un layout di blog classico in cui una colonna è per il post e l'altra per una barra laterale.

2 colonne flessibili

Il layout diventa molliccio quando la finestra si restringe ma il layout rimane in posizione.

Vedere la griglia CSS della penna: intestazione, piè di pagina con 2 colonne (flessibile) di Geoff Graham (@geoffgraham) su CodePen.

2 colonne reattive

Le cose si accumulano su schermi più piccoli.

Vedere la griglia CSS della penna: intestazione, piè di pagina con 2 colonne (reattivo) di Geoff Graham (@geoffgraham) su CodePen.

Distribuito uniformemente, adatto come necessario

Gli elementi fluiscono nel layout e finiscono quando non ce ne sono più.

Vedere la griglia CSS della penna distribuita uniformemente, tante quante ne servono da Geoff Graham (@geoffgraham) su CodePen.

Articolo con Breakout

Un piccolo grande trucco di Tyler Sticka che consente a un elemento di uscire dalla griglia. Rachel Andrew fornisce una spiegazione completa su come le linee della griglia con nome consentono a questo di funzionare.

Vedi Pen CSS Grid: articolo con Breakout di Geoff Graham (@geoffgraham) su CodePen.

Calendario di base

Come ci si potrebbe aspettare, CSS Grid funziona bene per una griglia di calendario.

Vedi il Pen CSS Grid: Calendar di Geoff Graham (@geoffgraham) su CodePen.

Consiglio di monopolio

Una semplice ricreazione del tabellone di gioco. Jen Simmons ha una dolce demo completa di stili Monpoly.

Vedi Pen CSS Grid: Monopoly Board di Geoff Graham (@geoffgraham) su CodePen.

I nostri master frontend per partner di apprendimento

Hai bisogno di formazione sullo sviluppo front-end?

Frontend Masters è il posto migliore per ottenerlo. Hanno corsi su tutte le più importanti tecnologie front-end, da React a CSS, da Vue a D3, e oltre con Node.js e Full Stack.