10 pratici frammenti di codice della griglia CSS

Le specifiche della griglia CSS non sono esattamente "nuove", ma sono decisamente più recenti nel mondo degli sviluppatori mainstream. Molti programmatori di frontend non conoscono ancora le proprietà della griglia CSS, per non parlare di come si applicano a un'interfaccia.

Puoi trovare molti tutorial cercando in giro, ma ti consiglio anche di studiare frammenti di codice. In questo modo ti stai immergendo in progetti del mondo reale in modo da poter vedere come funzionano le griglie CSS su una pagina Web live.

Questa raccolta dovrebbe offrire molte risorse per aiutarti a imparare, personalizzare e ridisegnare le griglie CSS per qualsiasi cosa tu stia facendo sul web.

1. Blocco eroe multi-immagine

Diamo il via alle cose con questo fantastico blocco eroe progettato con proprietà della griglia. Questo design imita la sezione dell'immagine dell'eroe della home page che troverai su molti siti Web in stile rivista.

Lo sviluppatore Rachel Andrew lo ha creato usando un po' di CSS personalizzato dai suoi stessi progetti. Funziona incredibilmente bene e il design è completamente reattivo all'avvio.

Per non parlare del fatto che sembra fantastico sugli schermi mobili; non qualcosa che trovi sempre con blocchi di immagini di grandi dimensioni.

Questa è una risorsa eccellente per studiare le griglie CSS e un pratico snippet per chiunque codifichi un tema di blog in stile rivista.

2. Layout griglia CSS

La proprietà grid-auto-flow è completamente visualizzata con questa demo che utilizza l'impostazione "dense". Ciò costringe gli elementi a comprimersi più in basso nella pagina mentre la griglia si ridimensiona.

Con questa impostazione hai molto controllo su quali elementi della pagina cambiano posizione, dove si verificano tali modifiche e come dovrebbe rispondere la griglia. Questo prende un posto in primo piano sulle query multimediali che vengono utilizzate principalmente nel design reattivo.

Se non sei sicuro di cosa faccia questo codice, ricorda: Google è tuo amico! Molti ottimi post e thread di Stack Overflow che coprono l'intera configurazione.

3. Fatti di zucca non così spettrali

Ecco uno snippet piuttosto interessante creato con alcuni fatti di base sulla zucca. Bene, fatti di zucca organizzati da un layout a griglia CSS.

Il codice funziona effettivamente su SCSS/Sass, il che significa che avrai bisogno di una certa familiarità con il linguaggio per approfondire. Ma puoi anche compilare il codice Sass in CSS grezzo direttamente all'interno di CodePen se vuoi vedere le proprietà di base.

Una delle cose che preferisco di questo design è il colore e la tipografia. Urla davvero Halloween con l'icona della zucca e tutte quelle sfumature di giallo/arancione.

4. Layout esagonale automatico

Questo è forse uno dei progetti più pratici che ho trovato per questa galleria. Dai un'occhiata a questo stile di griglia e prova a ridimensionare il tuo browser.

Noterai che gli elementi a forma esagonale si riformattano per adattarsi di conseguenza alla pagina. Questo è probabilmente il modo migliore per gestire pagine complesse con molte foto. Vedo spesso questo tipo di layout sui siti web delle conferenze e sulle pagine "chi siamo" per le aziende con molti dipendenti.

Ora con la struttura della griglia CSS non devi preoccuparti degli stili reattivi manuali. E questo frammento di codice è il punto di partenza migliore per pianificare un layout simile.

5. Pokedex nella griglia CSS

Devo ancora vedere qualcosa di così creativo come questo Pokedex in una griglia CSS. Si basa su HTML e CSS con un po' di JavaScript per il riempimento automatico delle dimensioni delle celle.

Man mano che ridimensioni la pagina, noterai che anche la grafica stessa aumenta di dimensioni. Questo è dannatamente facile da gestire con i CSS ed è ancora più facile una volta apprese alcune delle proprietà della griglia.

Nota che non è interattivo, quindi non puoi fare clic su nulla o aprire nuove pagine. Ma con la base del layout incastonata nella pietra, sarebbe dannatamente semplice aggiungere quelle funzionalità.

6. Griglia semplice

Ecco un'idea davvero interessante che porta gli stili di design di stampa sul web. Dai un'occhiata a questo esempio su CodePen con molte colonne con intestazioni e tipografia sovradimensionata.

Lo stesso layout della griglia si basa su colonne impostate con spazi predefiniti. Ciò significa che quando ridimensioni il browser, alcune colonne vengono suddivise in base a queste regole.

È un modo eccellente per garantire che determinate colonne appaiano sempre una accanto all'altra, o almeno appaiano in vista, in modo che siano facili da leggere.

7. Griglia CSS con Flexbox Fallback

Non tutti i browser hanno raggiunto la struttura della griglia CSS. Ecco perché questo frammento di codice ti insegna come progettare una griglia CSS personalizzata usando flexbox (e float) come fallback.

Questo è in realtà complicato poiché si desidera utilizzare le proprietà della griglia se sono supportate, ma in caso contrario si desidera che il browser le ignori. Per fortuna il codice è ben commentato, quindi puoi scavare e persino provare a regolare alcune delle funzionalità per te stesso.

Non la definirei una soluzione di fallback perfetta, ma è decisamente meglio di niente.

8. Demo sulla terminologia della griglia

Non sei sicuro di tutta questa terminologia della griglia CSS confusa? Quindi questo frammento può aiutare a chiarire le cose.

Se approfondisci questo esempio, troverai alcune funzionalità evidenziate con annotazioni che spiegano le griglie lungo il percorso. Imparerai anche come guardare correttamente le griglie e come vedere accuratamente le griglie CSS sulla pagina.

Nota che non raccoglierai tutto da questa demo perché non copre tutto. È solo una piccola introduzione alle proprietà più semplici con aiuti visivi per aiutare.

9. Usando grid-template-columns: repeat()

Per un esempio molto specifico della proprietà grid-template-columns dai un'occhiata a questa demo dal vivo. Ti mostra come utilizzare la funzione di ripetizione invece di dichiarare lo stesso valore di colonna più volte nel tuo CSS.

Ancora una volta, il supporto del browser sta ancora recuperando terreno, ma la maggior parte dei browser Web moderni funziona con questa tecnica.

Per non parlare del fatto che troverai molti commenti all'interno del CSS per aiutarti a capire cosa fa.

10. Cruciverba a griglia CSS puro

Per concludere con una nota divertente, dai un'occhiata al cruciverba CSS puro di Adrian Roworth. L'intero layout è costruito solo su codice HTML e CSS, in particolare le proprietà della griglia CSS per la struttura del layout.

La cosa ancora più folle è che puoi inserire il contenuto nelle caselle dei cruciverba per risolvere effettivamente gli enigmi. Quant'è fico!

Nota che questa cosa è piuttosto complessa ed è uno dei pochi progetti elencati qui che non è mobile friendly. Ma è la prova di quanto siamo arrivati ​​lontano con i layout delle griglie sul web, quindi spero che vedremo molto di più di questo genere di cose nel prossimo futuro.