Conoscere le proprietà del linguaggio CSS è fondamentale per cimentarsi in maniera adeguata all’apprendimento dello sviluppo web. Come, ormai, ben sappiamo, il linguaggio CSS è un linguaggio fondamentale per definire il front-end all’interno di una pagina web. Ma più nello specifico, il CSS cos è?
CSS: cos è?
Si tratta di un linguaggio per la stilizzazione di un documento HTML; infatti, i file CSS sono comunemente chiamati “fogli di stile”. Non a caso, CSS sta per Cascading Style Sheets ed è fondamentale per la formattazione dei documenti in una pagina web. Se vuoi imparare a programmare, sicuramente il linguaggio CSS è un linguaggio che possiede una curva di apprendimento semplice e graduale e, quindi, un corso css potrebbe essere un’ottima idea, specialmente se si ambisce a diventare sviluppatore web.
Grazie all’ausilio delle sue regole sarà possibile, infatti, definire i colori, la dimensione degli elementi, i font e la posizione degli oggetti nella pagina.
Proprio quest’ultima caratteristica è fondamentale per organizzare una pagina web ordinata, comprensibile per l’utente e con un elevato grado di interazione. Il linguaggio CSS mette a disposizione il Grid, un layout bidimensionale che si può utilizzare per creare elementi responsive nelle pagine web. Gli elementi sulla griglia sono disposti in colonne e sono facilmente posizionabili senza andare a modificare il codice HTML. A differenza di altre proprietà, possiamo avere dei riquadri che non dipendono dalla lunghezza o dall’altezza degli altri.
Per funzionare, il grid deve essere inserito all’interno di un altro elemento “padre”, che contiene le varie colonne della griglia. Una caratteristica del grid CSS è l’ingente quantità di proprietà che possiede. Una delle più importanti è la display: grid.
Questa è una proprietà della griglia CSS che ospita gli elementi della griglia stessa. Bisogna implementare la proprietà nel contenitore del grid CSS impostando il contenitore su una proprietà di visualizzazione. Scrivendo proprio:
display: grid;
Per definizione questa proprietà consente di stabilire l’elemento come contenitore della griglia e stabilisce un nuovo contesto di formattazione della grid per il suo contenuto. Accetta due tipi di valori CSS diversi, il già citato grid che genera una griglia a livello di blocchi (che contengono elementi HTML) oppure inline-grid che genera una griglia allineata.
Senza la proprietà display: grid la griglia non verrà visualizzata. È fondamentale ricordarsi di inserire questa proprietà all’interno di ogni grid-container o qualsiasi sia l’elemento padre che contiene la griglia.
In maniera più generica, la proprietà display imposta i tipi di visualizzazione interni ed esterni di un elemento. Il tipo interno gestisce il layout degli elementi “figli”. Quando associamo grid a display, il comportamento del blocco che verrà visualizzato dipende dalle regole e dal contenuto settato nel grid model. È cruciale non dimenticare questa proprietà in quanto definisce come le componenti si andranno a posizione all’interno della pagina web. Il display grid, alla fine della fiera, non gestisce la posizione interna dei blocchi, la loro dimensione o disposizione, ma è di supporto ai settaggi e le altre (innumerevoli) proprietà che grid usufruisce per posizionare le righe o colonne. Vediamo alcuni esempi in linguaggio CSS:
per definire una griglia molto basilare in CSS bisogna usare la proprietà display:grid sull’elemento genitore. Dopodiché, si vanno a fissare tutte le proprietà per la gestione di righe e colonne della griglia.
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 10px;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
Come si nota, la proprietà display è la prima ad essere dichiarata. Quest’ultima erediterà le altre proprietà di grid CSS per consentire la visualizzazione della griglia sulla pagina web.
Qualsiasi tipo di griglia che si vuole realizzare, necessita obbligatoriamente la proprietà display. Dimenticarla od ometterla è un errore molto grave che può compromettere la struttura della pagina web.
L’alternativa più utilizzata al Grid nel CSS, è il Flexbox CSS.
Non sai che cos’è? Non preoccuparti troppo! Per scoprirlo, puoi andare a consultare la nostra guida html e css online!
Imparare a programmare è un processo lungo che richiede dedizione, ma che diventa una grossa soddisfazione se è la tua ambizione. Per saperne di più sulle grid, sulla proprietà display e sul linguaggio CSS in generale non perdere la nostra già citata guida e Hackademy, il nostro corso di sviluppatore web!
