Come creare un layout semplice con layout a griglia CSS

Se ti sei mai dilettato nel design della stampa, sai da dove è nata l'idea dei layout della griglia. Una griglia è uno strumento di misurazione preciso utilizzato per posizionare elementi di design su una pagina. Questa idea viene spesso utilizzata sul Web per rendere i contenuti organizzati e uniformi, migliorando l'esperienza di visualizzazione per i tuoi utenti.

Quando la pratica del web design era nuova, i layout erano piuttosto semplici. Intestazione, barra laterale, area del contenuto e piè di pagina. Ora, mentre il web si è evoluto, i nostri layout sono diventati più complessi e abbiamo molto di più da affrontare come web designer. Spesso abbiamo bisogno di numerose aree di contenuto, design reattivo, design di modelli di layout di più pagine, tra molte altre cose. E per implementare il design e farlo visualizzare correttamente, sono necessari float e posizionamento. I float sembrano semplici, ma a volte possono essere difficili da usare.

Fortunatamente, la griglia fornisce un modo più semplice per progettare e visualizzare i contenuti web. È un momento fantastico per essere un designer perché i layout a griglia CSS stanno rapidamente guadagnando terreno. Potrebbe sembrare che le griglie siano state una nuova idea nel web design negli ultimi anni, ma che tu ci creda o no, CSS Grid Layouts è in lavorazione da molti anni. Il supporto del browser per loro è avvenuto molto rapidamente, quindi ora possono aiutare ad alleviare parte della frustrazione relativa al posizionamento che i designer hanno dovuto affrontare per molti anni.

È finalmente giunto il momento di entrare nella griglia ed esplorare le nuove possibilità di design!

Supporto griglia CSS

Tutto dipende dai browser che devi supportare, ma ci sono buone probabilità che tu non debba preoccuparti della "modalità flag" quando usi le griglie CSS. Puoi sempre visitare la documentazione Can I Use per ricontrollare, ma il supporto per le griglie CSS è notevolmente aumentato e molti designer sono in grado di utilizzarlo in produzione, il che è motivo di celebrazione!

Nozioni di base sul layout della griglia CSS

Utilizzando i CSS, i layout della griglia aiuteranno a definire le aree di contenuto sulla tua pagina web. C'è un insieme relativamente nuovo di proprietà definite nelle CSS Grid Layout Specifications. Questa è un'ottima risorsa a cui fare riferimento quando si impara di più su questo nuovo modo di progettare il layout. I CSS Grid Layouts aiutano a semplificare le cose e facilitano la creazione di layout. Pensa alla griglia come a una struttura in cui è possibile definire le misure.

Parti della griglia

Linee

In questo caso, ci sono cinque linee verticali e tre linee orizzontali. Alle righe vengono assegnati numeri a partire da uno. Le linee verticali sono mostrate da sinistra a destra in questo esempio, ma ciò dipende dalla direzione della scrittura. Poiché questo mostra la lettura da sinistra a destra, se è da destra a sinistra, le cose saranno invertite. Alle linee possono essere assegnati nomi (facoltativo), il che aiuta a farvi riferimento nei CSS.

Brani

Una traccia è lo spazio tra due linee parallele. Nel diagramma ci sono quattro binari verticali e due orizzontali. C'è un grande doppio sforzo tra linee e tracce. Le linee sono un ottimo modo per fare riferimento a dove inizia e finisce il contenuto. Le tracce sono dove va effettivamente il contenuto.

Cellule

Le celle si trovano dove si incontrano una traccia orizzontale e una verticale. Ci sono otto celle nel diagramma.

le zone

Le celle entrano in gioco quando si specificano le aree. Un'area è una forma rettangolare che può estendersi su un numero di celle. Come le linee, le aree possono essere opzionalmente denominate. Ci sono alcune etichette incluse nel diagramma: "A", "B" e "C".

Creazione di un layout a griglia

Può essere utile abbozzare le cose prima di iniziare il layout. Non c'è sostituto per la buona vecchia carta millimetrata.

HTML per la griglia

 [html] <div class="container"> <div class="grid header">Header</div> <div class="grid sidebar">Sidebar</div> <div class="grid content">Main Content</div> <div class="grid extra">Extra Content</div> <div class="grid footer">Footer</div> </div> [/html]

Il contenitore è molto importante. All'interno del contenitore ci sono i diversi blocchi di contenuto per il sito web. L'ordine degli elementi della griglia all'interno del contenitore non ha importanza. Successivamente, useremo i CSS per inserirli nel nostro layout.

Stili CSS

Dopo aver finito con il markup HTML, la dichiarazione più importante viene fatta nel CSS. All'interno del contenitore, devi applicare display:grid o display:inline-grid . Usa display:grid se desideri una griglia a livello di blocco. Usa display:inline-grid per griglie a livello inline.

 [css] .container { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 10px; grid-row-gap: 15px; } .grid { background-color: #444; color: #fff; padding: 25px; font-size: 3rem; } [/css]

Le proprietà grid-template-columns e grid-template-rows vengono utilizzate per specificare la larghezza delle righe e delle colonne. Le grid-template-columns sono state impostate come 1fr e 3fr. È qui che la griglia prende forma con le unità frazionarie. Con questi valori, è evidente che ci sono due colonne e non hanno la stessa larghezza. La colonna impostata su 3fr è tre volte più larga dell'altra. Questo spiega come la barra laterale appaia più stretta dell'area del contenuto.

È possibile effettuare personalizzazioni reattive, ma l'utilizzo delle unità frazionarie è un ottimo primo passo. La spaziatura tra le aree può essere controllata con grid-column-gamp e grid-row-gap .

Le cose sembrano piuttosto strette, ma con qualche specifica in più, le cose prenderanno forma.

Questo esempio inizia con il posizionamento dell'intestazione, ma gli elementi possono essere posizionati nell'ordine che preferisci. Se vuoi iniziare con il piè di pagina, anche questo funzionerà.

Iniziamo con l'intestazione, che va dalla riga di colonna 1 alla riga di colonna 4 e dalla riga di riga 1 alla riga di riga 2. Il CSS avrà questo aspetto:

 [css] .header { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } [/css]

Potresti notare che la barra laterale è schiacciata e non possiamo vederla molto. Dovremo fare un piccolo riordino. In questo layout, fare riferimento alle linee per ottenere il posizionamento aiuterà con la disposizione. Le linee fungono da linee guida. L'intestazione si trova tra la riga della riga uno e la riga della riga due. Per la barra laterale, inizierà alla riga tre e terminerà alla riga sei. La riga dell'intestazione terminava a due, quindi questo verrà posizionato proprio sotto di essa. Per visualizzare l'esempio, vedere il progetto su Codepen.

Usiamo grid-column-start per specificare la linea verticale iniziale per un elemento. In questo caso, sarebbe impostato su tre. La grid-column-end indica la linea verticale finale per un elemento. In questo caso, questa proprietà sarebbe uguale a quattro. Anche gli altri valori di riga verranno impostati allo stesso modo. Il posizionamento della barra laterale è lì, è appena coperto dall'area del contenuto.

 [css] .sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; background: #a0c263; } [/css]

Il contenuto principale inizia alla colonna tre e termina alla colonna quattro. La parte superiore della barra laterale e l'area del contenuto sono pari, quindi entrambe hanno un grid-row-start a tre. Forse ti starai chiedendo come il contenuto e la barra laterale siano molto più alti. Mettendo un'altezza sul contenitore, in questo caso 400px, questo è ora più alto degli altri elementi.

 [css] .content { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: #f5c531; height: 400px; } [/css]

Le ultime due aree di contenuto sono l'area di contenuto extra e il piè di pagina.

 [css] .extra { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #898989; } .footer { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #FFA500; } [/css]

Le dichiarazioni di fine e inizio possono essere scritte in modo più efficiente. Potresti vedere grid-column-start: 1; e grid-column-end: 3; scritto in stenografia. Questo sembrerebbe grid-column: 1 / 3; . Questa stessa idea può essere utilizzata per dichiarare le informazioni sulle righe delle colonne.

Vantaggi reattivi

Ora che è stato creato un layout, sembra molto "desktop". E i tablet e i dispositivi mobili? I CSS Grid Layouts funzionano bene con le media query in modo che il design possa adattarsi alle diverse dimensioni dello schermo. La cosa davvero interessante è che puoi modificare le aree di contenuto in questi diversi punti di interruzione delle query multimediali. In qualità di designer, ciò significa che scegli ciò che è meglio per il tuo layout in diversi punti di interruzione. Ad esempio, se si desidera posizionare il "contenuto extra" sopra l'area "contenuto", è possibile specificare le colonne e le righe corrette.

 [css] /* For mobile phones: */ .header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .extra { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } .content { grid-column-start: 1; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6; background: #f5c531; height: 400px; } [/css]

Facendo in modo che le colonne inizino all'una e finiscano alle quattro, abbiamo allargato completamente le aree del contenuto. Le righe della griglia sono posizionate in modo che il "contenuto extra" sia ora sopra il "contenuto".

Strumento browser per CSS Grid Layout

Mentre stai progettando layout o ispezionando altri siti Web, Firefox offre un ottimo strumento per lavorare con CSS Grid Layouts. Si chiama CSS Grid Playground e rende l'esame della griglia molto intuitivo. Andando all'ispettore c'è un'opzione nella scheda layout per vedere visivamente come è costruita la griglia. Semplificherà il processo di progettazione disporre di questo strumento per esplorare in che modo le diverse proprietà della griglia influenzano il layout e il design generale della griglia.

I CSS Grid Layouts sono un modo nuovo ed entusiasmante per creare layout web. Come puoi vedere, è abbastanza facile essere operativi quando si crea un semplice layout di pagina. Questo semplice esempio è una buona base per creare layout più complessi. Man mano che questo guadagna in popolarità, ci sarà un vantaggio per questa tecnologia durante la progettazione di vari dispositivi e punti di interruzione con le personalizzazioni del layout che possono essere effettuate.