CSS Grid è un metodo sempre più diffuso per la creazione di complessi layout di progettazione web reattivi che rendono più coerenti tra loro i browser. Ora è il momento di familiarizzare con CSS Grid, quindi abbiamo raccolto 13 dei migliori modi per iniziare a imparare oggi.
Piuttosto che i metodi della vecchia scuola come le tabelle o il modello box, CSS Grid consente di creare layout più asimmetrici e un codice più standardizzato compatibile con browser diversi. La maggior parte dei principali browser Web supporta già CSS Grid ed è una raccomandazione Candidato W3C, che la formalizzerebbe come pratica standard. È opinione diffusa che la griglia CSS sarà il futuro dei layout del sito web.
1. MDN: layout griglia CSS
Mozilla ha grandi risorse nelle guide MDN Web Document, dimostrando una semplice spiegazione di come funzionano le cose e degli esempi di codice per iniziare.
Ecco cosa dice MDN sulla griglia CSS:
CSS Grid Layout eccelle nel dividere una pagina in regioni principali, o nel definire la relazione in termini di dimensioni, posizione e livello, tra parti di un controllo costruito da primitive HTML.
Come le tabelle, il layout della griglia consente all'autore di allineare elementi in colonne e righe. Tuttavia, molti più layout sono possibili o più semplici con la griglia CSS rispetto a quelli con le tabelle. Ad esempio, gli elementi figlio di un contenitore di griglia potrebbero posizionarsi in modo che si sovrappongano e sovrappongano effettivamente, in modo simile agli elementi posizionati CSS.
La documentazione offre codice ed esempi più elementi che puoi aprire e giocare da solo in CodePen o JSFiddle. Questo potrebbe essere il miglior punto di partenza in termini di pensiero sulla griglia CSS.
2. Impara griglia CSS
Learn CSS Grid è una guida per imparare la tecnica da Jonathan Suh, basata sul metodo con cui l'ha imparata. La guida è ben organizzata e inizia con un sommario che ti permette di saltare da una sezione all'altra.
Questa guida è facile da seguire - richiede una certa conoscenza della codifica - ed è una grande risorsa per i principianti della griglia CSS. Ogni elemento viene fornito con un esempio visivo, che potrebbe essere il pezzo chiave nel riunire tutte le informazioni.
3. Tuts + Guida alle griglie CSS
Tuts + ha creato una guida completa per aiutarti a imparare CSS Grid, sia che tu stia appena iniziando con le basi o se desideri esplorare CSS più avanzati. È fatto attraverso una serie di tutorial chiari e completi, con esempi pratici in tutto.
4. Codeacademy: Introduzione alle griglie
Codeacademy è stata a lungo uno dei posti migliori per imparare le capacità di codifica in un formato pratico. Mentre devi creare un account per accedere alle esercitazioni, è un ottimo modo per imparare a usare un formato basato sul piano di lezione.
Ecco la descrizione del corso Introduction to Grids:
In questa lezione, presentiamo un nuovo, potente strumento chiamato griglia CSS. La griglia può essere utilizzata per disporre intere pagine web, mentre Flexbox è utile soprattutto per posizionare gli oggetti in un layout unidimensionale, la griglia CSS è molto utile per i layout bidimensionali, fornendo molti strumenti per allineare e spostare elementi su entrambe le righe e colonne.
Il corso di Codeacademy può essere preso in sequenza - inizia all'inizio se sei completamente nuovo nel back-end del web design o da solo. È libero di creare un account e prendere molti dei corsi.
5. FreeCodeCamp: impara griglia CSS in 5 minuti
Ottieni la griglia CSS e avrai solo pochi minuti per immergerti davvero? Questo tutorial di avvio rapido di FreeCodeCamp ti aiuterà a familiarizzare con esso in soli cinque minuti. (Certo, devi già conoscere alcune nozioni di base).
Ecco il takeaway:? I due ingredienti principali di una griglia CSS sono il wrapper (genitore) e gli elementi (bambini). Il wrapper è la griglia effettiva e gli elementi sono il contenuto all'interno della griglia.
La guida di 5 minuti include anche il markup pertinente.
6. Il laboratorio di layout CSS
Il CSS Layout Workshop è un insieme di corsi a pagamento di Rachel Andrew, uno dei leader nel lavoro sulla griglia CSS. I corsi sono un programma di autoapprendimento online che è l'ideale per imparare qualcosa di nuovo.
Per vedere se questo corso è giusto per te, la prima parte è gratuita. Si concentra sulle basi CSS e spiega tutte le basi necessarie per approfondire il contenuto. La cosa buona del set completo di corsi è che non ci sono costi aggiuntivi; hai solo bisogno di un browser web e di un editor di testo per iniziare.
7. Gioco: Grid Garden
Grid Garden è un gioco che usa i CSS per coltivare un frutteto di successo. È un buon primer su come funzionano le proprietà CSS per metterti nella giusta mentalità per pensare alla griglia CSS.
E beh, è molto divertente. Vedi se riesci a superare tutti i 28 livelli.
8. Griglia per esempio
Grid by Example mostra in che modo le diverse configurazioni della griglia CSS appariranno nei browser di supporto. Ogni configurazione di griglia include un esempio visivo con collegamenti a pagine con maggiori informazioni sulla tecnica e il codice.
C'è anche un bonus divertente con layout di pagina fittizi in modo da poter vedere come appaiono diversi esempi di griglia CSS con contenuti reali ad essi applicati.
9. Video: impara la griglia CSS
Se imparare vedendo qualcuno fare qualcosa è più importante, guarda il video Learn the CSS Grid. (Ha anche un testo di accompagnamento.)
Il video di 18 minuti è un tutorial introduttivo più rapido che il creatore spera possa facilitare la tua voglia di esplorare tutto il potenziale della griglia CSS.
Il video ti porta attraverso l'impostazione di un progetto, la definizione dell'HTML, la definizione di alcune regole di base, la definizione di griglie, l'annidamento della griglia CSS e delle aree template e alcuni accorgimenti sensibili. Il video e il testo includono screenshot di tutti i markup.
10. Trucchi CSS: una guida completa alla griglia
I CSS-Tricks sono stati a lungo uno dei luoghi più gettonati per conoscere la programmazione. La guida completa alla griglia non fa eccezione.La guida, pubblicata a novembre 2017, è un primer aggiornato sul sistema 2D.
Questa guida è fantastica e suddivisa in sezioni digeribili.
Ma la parte migliore potrebbe essere la galleria di griglia CSS in azione. Assicurati di trascorrere un po 'di tempo nella galleria per l'ispirazione.
11. Grid CSS Chiedimi qualunque cosa
Hai domande sulla griglia CSS? Chiedi a un esperto.
Questo Git include semplici domande e risposte di Rachel Andrew. Mentre risponde solo a domande ridotte, è comunque abbastanza utile. Assicurati di seguire le regole di base.
12. Video: Progresso i nostri layout
Jen Simmons condivide i suoi discorsi della Enhance Conference 2016 per gli utenti. Il video di 30 minuti illustra esempi di griglia CSS in azione e tocca come scrivere codice in un momento di tecniche di transizione.
Guarda il video e poi puoi anche passare attraverso il mazzo di diapositive. La coppia è abbastanza utile per pensare alla griglia CSS in termini più ampi.
13. CSS Grid Playground
Sei pronto a testare tutte le idee e le abilità della griglia CSS? Il Grid Playground di CSS include le posizioni del contenitore della griglia e degli elementi della griglia in modo da poter iniziare la codifica e vedere cosa succede in tempo reale.
È un buon modo per sentirsi a proprio agio con le nozioni di base e vedere i cambiamenti mentre li fai. (Sembra quasi un gioco.)
Conclusione
Smettila di procrastinare se non hai fatto il salto in almeno familiarizzando con la griglia CSS. Rendilo un obiettivo per familiarizzare con le migliori pratiche in modo che tu possa capire meglio come funziona e come usarlo.
Ecco un messaggio per tutte le persone là fuori che stanno fornendo grandi risorse sulla griglia CSS. Devi ammettere che la comunità di web design e sviluppo è piuttosto sorprendente quando si tratta di condivisione delle conoscenze. Se usi una di queste lezioni o tutorial e ne tragga un beneficio, assicurati di condividere l'amore con l'autore e fagli sapere che ti hanno aiutato.