Share
Nel suggerimento rapido di oggi ti mostrerò cinque risorse per padroneggiare il layout griglia CSS. Tuffiamoci dentro!
Grid Layout è probabilmente uno degli sviluppi più significativi per gli sviluppatori web sin dalla nascita dei CSS. Si tratta di un sistema di layout specifico per l'uso con interfacce utente basate su griglia, il che significa che l'approccio standard "float" (qualcosa di un hack, siamo onesti) non è più necessario come mezzo principale per creare una pagina web.
La prima bozza di lavoro è stata pubblicata nel 2011 e, che ci crediate o no, dobbiamo ringraziare Microsoft per gran parte del suo sviluppo; tre dei primi quattro autori facevano parte del team Microsoft. Quella versione iniziale è ormai superata, poiché è stata sostituita dal modulo di layout di griglia CSS Livello 1.
Il supporto del browser per Grid è già molto promettente, quindi è giunto il momento di familiarizzare con la sintassi. Ecco alcune grandi risorse per darti il calcio d'inizio.
Il primo esempio viene da Mozilla. La sua introduzione a CSS Grid Layout copre le basi, ma anche concetti avanzati come le linee di denominazione. È una risorsa completa, ma anche splendidamente presentata con una navigazione chiara, una grafica accattivante e penne con cui puoi giocare e giocare.
Un'altra risorsa approfondita è learncssgrid.com di Jonathan Suh. Spiega la teoria alla base della sintassi, mentre mostra anche esempi di alcuni dei più comuni schemi di layout di cui potresti aver bisogno.
Successivamente ci dirigiamo verso CSS Tricks per una grande risorsa di Chris House (nel video ho accreditato erroneamente Chris Coyier, mi scuso per questo). La "Guida completa alla griglia" è esattamente ciò che ti aspetteresti; molto completo. Descrive le proprietà del contenitore della griglia e degli elementi della griglia in colonne separate. Ottimo lavoro, come al solito, da CSS Tricks.
"Grid by Example" è sviluppato e mantenuto da Rachel Andrew (lei stessa un membro del gruppo di lavoro per CSS Grid Layout) ed è in giro da un po 'di tempo. Oltre alla "guida introduttiva", che fornisce tutte le informazioni essenziali sulle specifiche, offre molti esempi e modelli "afferrati e vai" per i layout più comuni.
Se preferisci imparare per video, ti consiglio vivamente (ovviamente!) Di dare un'occhiata a questi corsi di Craig Campbell. Il primo (3 progetti Grid CSS per i web designer) ti guida attraverso tre progetti Grid CSS, con esempi su Codepen da mettere in pratica e praticare su.
3 progetti di griglia CSS per i web designerIl corso più recente di Craig (che unisce CSS Grid Layout e Flexbox Together) spiega come utilizzare due dei più potenti moduli di layout CSS (Grid e Flexbox) insieme.
Portare insieme il layout Grid CSS e FlexboxQuesta rapida carrellata ti dà un ottimo inizio per l'apprendimento della griglia CSS. Tutte le risorse qui includono esempi pratici che puoi usare per approfondire e rafforzare la teoria. Ti lascio qualche altro tutorial, ma fino alla prossima volta, felice apprendimento!
Accentsconagua