Il mio amico John ha fatto un errore nella griglia CSS. Non essere come John, fallo invece.

Happy John :) John e Khalid sono personaggi immaginari, così come l'intera storia.

Erano passati due anni e John non aveva un lavoro.

John era un ragazzo intelligente di 20 anni. Ok, aveva un lavoro, ma non era quello che gli piaceva. Era troppo monotono e non abbastanza creativo. Il suo lavoro quotidiano lo annoiava solo da morire.

La ricerca di lavoro

Per John, sembrava che non fosse difficile imparare a programmare. Si è insegnato a programmare e ha iniziato a cercare l'opportunità di lasciare il suo lavoro noioso - finalmente.

Dopo un mese di inutili ricerche di lavoro, ricevette una chiamata da Sharon.

Sharon è stato il reclutatore di youknowho Inc, una startup di intelligenza artificiale nella valle.

Con molto entusiasmo, John attraversò tutto il processo di assunzione. Indovina qual è stata la parte interessante?

Quella chiamata da Sharon.

Ha fatto un paio di domande sul suo passato e John non vedeva l'ora di condividere con lei la sua noiosa, monotona tipica giornata di lavoro.

Ha cercato di dire a se stesso che non aveva importanza se avesse ottenuto il lavoro. Almeno, quelle erano le parole che borbottava al termine della chiamata. "Ho dovuto solo condividere ciò che provavo sul mio attuale lavoro", ha detto.

Sono trascorse settimane e sembrava un sogno quando si è trovato un lavoro come sviluppatore frontend junior.

Ed è qui che inizia la storia.

John incontra Khalid e la griglia CSS

Khalid non era un DJ.

Se lo fosse, allora tutto ciò che mescolava era un codice pulito e non canzoni.

Se volevi rovinare un bel afterparty, allora Khalid sarà il tuo DJ. Avresti a dir poco un casino completo.

Khalid non era comunque un grande fan delle canzoni, ma chi ha bisogno di amare la musica quando sei un capo tecnologico in una fiorente Startup in the Valley?

Come capo tecnologico, Khalid era responsabile dell'intero team di sviluppo. Ciò significava molto più che occuparsi solo di problemi tecnici, ma significava anche che aveva a che fare con persone di diversa estrazione.

E questa è una cosa maledettamente difficile da superare. Ma Khalid eccelleva non solo per essere un grande leader tecnico. Ha avuto un rapporto impeccabile con il team di sviluppo.

Non è stata una sorpresa che i due abbiano parlato quasi immediatamente. Chi non amerebbe John?

I suoi ampi sorrisi furono sufficienti per illuminare un tunnel. Lui sorrideva sempre. Chi lo fa!

Di nuovo in ufficio

Tutti erano pronti per il lavoro.

John entrò con una tazza di caffè. Era mattina e l'ufficio aveva appena iniziato a ronzare.

Buon lunedì mattina, eh?

“Quindi, John, è bello averti unito al team di sviluppo. Ti stavi chiedendo se eri pronto ad affrontare un nuovo compito oggi? ”Chiese Khalid

“Ehi, capo. Sono nato pronto! ”

Questo è John per te. Era nato pronto, anzi. Felice amico.

"Umm, ho bisogno che tu imposti una nuova landing page per il nostro nuovo prodotto. E lo vogliamo scritto con la griglia CSS. Ne hai mai sentito parlare?

"Oh sì, l'ho fatto", disse John in fretta.

Imparare la griglia CSS

John non aveva idea di cosa fosse la griglia CSS.

L'unica ragione per cui ha detto di sì è che non voleva sembrare stupido di fronte a Khalid.

Ha cercato su Medium e ha trovato ottimi articoli sulla griglia CSS. Ha letto il contenuto del suo cuore e ha iniziato a lavorare sul layout.

Il layout costruito da John

John ha avuto molta esperienza con Bootstrap.

Conosceva abbastanza bene il concetto di griglia a 12 colonne. Quindi, con la griglia CSS, la prima cosa che ha fatto è stata impostare una griglia a 12 colonne in questo modo:

grid-template-column: repeat (12, 1fr)

"Haha, è stato facile" pensò tra sé.

In effetti, John lo ha fatto per tutti i progetti secondari a cui ha lavorato durante l'apprendimento della griglia CSS.

A John è piaciuto lavorare con la griglia CSS e ha pensato che fosse divertente.

Ha commesso alcuni errori e alcune cose non hanno funzionato come previsto, ma è stato in grado di risolvere rapidamente i problemi.

Sapeva come su Google. Al giorno d'oggi, tutti dovrebbero.

L'incontro con Khalid

"Ora ho funzionato, capo."

Khalid era entusiasta di vedere John. Parlarono della sua esperienza nella costruzione del layout e Khalid continuò a dare un'occhiata al codice.

Bene, ogni layout creato con la griglia CSS inizia praticamente con la definizione della griglia. Quindi, era lì che Khalid appariva per primo.

"Oddio. C'è qualcosa che non è qui. "

Perché hai creato 12 colonne?

E Khalid ha iniziato la sua lezione ...

12 griglie di colonne sono oggi popolari nel web design. Ma l'idea alla base della griglia CSS è quella di creare il numero di colonne necessarie senza gonfiare il layout con colonne che non ti servono davvero.

Il layout Grid CSS ti costringe a pensare ai layout in CSS in modo leggermente diverso rispetto a quanto abbiamo fatto per oltre 20 anni.

È un punto di svolta, che include molto disimparare.

"Un approccio più pulito sarebbe stato quello di creare le 2 o 3 colonne di cui avevi bisogno e andare avanti con il design", ha affermato Khalid.

"Non c'è nulla di male nel ridefinire il numero di colonne all'interno della query multimediale. Lo rende perfetto per un design reattivo. "

La lezione

Con il layout Griglia CSS, non sei vincolato a un determinato numero di righe o colonne.

Inoltre, non è necessario creare 12 colonne ogni volta. Se non hai bisogno di 12 colonne, non crearle. La griglia CSS non è un altro framework CSS basato su griglia.

Sei libero.

Come sottolineato da Per Harald Borgen, puoi creare 12 colonne se vuoi sperimentare spazi bianchi tra le colonne.

Oltre a ciò, crea il numero di colonne di cui hai veramente bisogno e vai avanti con il design.

L'uso del layout Grid CSS fa avanzare il Web

Ho letto una risposta al motivo per cui Apple continua a sbarazzarsi delle cose, invece di aggiungerle.

Lì ho imparato questo:

“Supportare l'eredità non è sempre la risposta migliore. Far cadere le cose aiuta l'industria ad andare avanti per adottare formati più nuovi, migliori. "

Allo stesso modo, la scelta di imparare e usare la griglia CSS fa avanzare il web. Aiuta l'industria ad abbracciare formati più recenti e migliori. Ci aiuta a crescere come comunità. Una comunità che amiamo così tanto e vogliamo crescere.

Sii come Khalid. Inizia a utilizzare la griglia CSS se puoi.

Ove possibile, investi in un'educazione alla griglia CSS decente. Contribuirai a far avanzare il Web.

Vuoi diventare un professionista?

Scarica gratuitamente il mio cheat sheet CSS Grid e ricevi gratuitamente due corsi interattivi Flexbox di qualità!

Ottieni gratuitamente il foglio informativo sulla griglia CSS + Due corsi Flexbox di qualità gratis!

Ricevili ora