Tutorial sul layout CSS: dagli approcci classici alle tecniche più recenti

Pubblicato: 2022-03-11

Padroneggiare il layout web senza padroneggiare i CSS è fattibile quanto imparare a nuotare sulla terraferma. Ma a differenza del nuoto – che, una volta padroneggiato, è un'abilità che rimane con te per tutta la vita – padroneggiare i CSS è un processo che non finisce mai davvero poiché i CSS stessi sono in continua evoluzione.

La sfida è aggravata dalle differenze nell'implementazione e nel supporto dei CSS tra browser diversi (e anche tra versioni diverse dello stesso browser), nonché dai diversi tassi di adozione dei consigli CSS. Per oltre un decennio, web designer e sviluppatori sono stati alle prese con esplosioni sporadiche e incoerenti di funzionalità CSS3 aggiuntive supportate in ogni nuova versione del browser.

Comunque sia, padroneggiare i CSS è una necessità assoluta per qualsiasi web designer o sviluppatore solido. Questo articolo ti guiderà attraverso alcuni principi fondamentali del layout CSS, dalle classiche tecniche CSS2 ai più recenti approcci di layout in CSS3.

NOTA: tutti gli esempi di codice in questo articolo utilizzano elementi HTML5 e sintassi Sass. Il codice funzionante completo può essere clonato da https://github.com/laureanoarcanio/css-layout-examples.

Caso d'uso

Uno dei modi migliori per apprendere una tecnologia è avere un caso d'uso specifico che stai cercando di supportare o un problema particolare che stai cercando di risolvere. A tal fine, ci concentreremo su un caso d'uso con una serie specifica di requisiti.

Il nostro caso d'uso consiste in un layout di app Web con un comportamento dinamico. Avrà elementi fissi sulla pagina come intestazione, piè di pagina, menu di navigazione e sotto-navigazione, oltre a una sezione di contenuto scorrevole. Ecco i requisiti di layout specifici:

Disposizione di base
- Intestazione, piè di pagina, menu di navigazione e navigazione secondaria rimangono tutti fissi durante lo scorrimento
- Gli elementi di navigazione e sottonavigazione occupano tutto lo spazio libero verticale
- La sezione dei contenuti utilizza tutto lo spazio libero rimanente sulla pagina e dispone di un'area scorrevole
Comportamento dinamico
- Il menu di navigazione mostra solo le icone per impostazione predefinita, ma può essere espanso per visualizzare anche il testo (e quindi può essere compresso per mostrare di nuovo solo le icone)
Variazioni di layout
- Alcune pagine hanno la navigazione secondaria accanto al menu di navigazione e altre no

Esercitazione CSS utilizzando le tecniche CSS2 classiche

Per cominciare, ecco il markup HTML5 che useremo con la nostra implementazione di esempio usando il CSS classico:

 <body class="layout-classic"> <header></header> <nav></nav> <aside></aside> <main></main> <footer></footer> </body>

Posizionamento fisso

In CSS2, possiamo ottenere gli elementi fissi sulla pagina (intestazione, piè di pagina, ecc.) utilizzando un modello di layout posizionato che utilizza il posizionamento fisso.

Inoltre, utilizzeremo la proprietà CSS z-index per garantire che i nostri elementi fissi rimangano "sopra" gli altri contenuti della pagina. La proprietà z-index specifica l'ordine di stack di un elemento, dove un elemento con un ordine di stack maggiore è sempre "sopra" un elemento con un ordine di stack inferiore. Si noti che la proprietà z-index funziona solo con elementi posizionati . Per il nostro esempio, utilizzeremo arbitrariamente un valore z-index di 20 (che è superiore al valore predefinito) per garantire che i nostri elementi fissi rimangano visivamente in primo piano.

Inoltre, imposteremo la proprietà width su 100% che indica al browser di utilizzare tutto lo spazio disponibile orizzontalmente per l'elemento.

 #header, #footer { position: fixed; width: 100%; z-index: 20; } #header { top: 0; height: 5em; } #footer { bottom: 0; height: 3em; }

OK, quindi questo è l'intestazione e il piè di pagina. Ma che dire del #nav e del #subnav ?

Espansione CSS

Per #nav e #subnav , utilizzeremo una tecnica leggermente più sofisticata nota come CSS Expansion , che può essere utilizzata quando si posizionano elementi come fissi (cioè in una posizione fissa nella pagina) o come assoluti (cioè in un posizione specificata rispetto al suo predecessore posizionato più vicino o al blocco contenitore).

L'espansione verticale si ottiene impostando le proprietà top e bottom di un elemento su un valore fisso, in modo che l'elemento si espanda verticalmente per utilizzare di conseguenza lo spazio verticale rimanente. Fondamentalmente quello che stai facendo è legare la parte superiore dell'elemento a una distanza specifica dalla parte superiore della pagina e la parte inferiore dell'elemento a una distanza specifica dalla parte inferiore della pagina, quindi l'elemento si espande per riempire l'intero spazio verticale tra quei due punti.

Allo stesso modo, l'espansione orizzontale si ottiene impostando entrambe le proprietà left e right di un elemento su un valore fisso, quindi l'elemento si espanderà orizzontalmente per utilizzare di conseguenza lo spazio orizzontale rimanente.

Per il nostro caso d'uso, dobbiamo usare l'espansione verticale.

 #nav, #subnav { position: fixed; top: 6em; /* leave 1em margin below header */ bottom: 4em; /* leave 1em margin above footer */ z-index: 20; } #nav { left: 0; width: 5em; } #subnav { left: 6em; /* leave 1em margin to right of nav */ width: 13em; }

Posizionamento predefinito (statico).

L'area del contenuto scorrevole principale può semplicemente fare affidamento sul posizionamento predefinito (statico), per cui gli elementi vengono visualizzati nell'ordine in cui appaiono nel flusso del documento. Poiché tutto il resto della nostra pagina è in una posizione fissa, questo elemento è l'unico che si trova nel flusso del documento. Di conseguenza, tutto ciò che dobbiamo fare per posizionarlo correttamente è specificare la sua proprietà margin per evitare qualsiasi sovrapposizione con intestazione, piè di pagina e nav/subnav fissi:

 #main { margin: 6em 0 4em 20em; }

E con ciò, abbiamo soddisfatto i requisiti di layout di base del nostro caso d'uso utilizzando CSS2, ma dobbiamo comunque soddisfare i requisiti aggiuntivi per la funzionalità dinamica.

Comportamento dinamico utilizzando le tecniche CSS2 classiche

I requisiti stabilivano che il nostro menu di navigazione avrebbe mostrato per impostazione predefinita solo le icone, ma sarebbe stato in grado di essere espanso per visualizzare anche il testo (e potrebbe quindi essere compresso per mostrare di nuovo solo le icone).

Iniziamo semplicemente aggiungendo 5em alla larghezza del menu di navigazione quando è espanso. Lo faremo creando una classe CSS "espansa" che possiamo aggiungere o rimuovere dinamicamente dall'elemento del menu di navigazione:

 #nav { left: 0; width: 5em; &.expanded { /* Sass notation */ width: 10em; } }

Ecco un esempio del codice JavaScript (in questo esempio usiamo jQuery) che può essere utilizzato per alternare dinamicamente il menu di navigazione dalla modalità espansa a quella compressa, in base all'utente che fa clic sull'icona di attivazione/disattivazione della navigazione:

 $('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav'').toggleClass('expanded'); });

E con ciò, il nostro menu di navigazione ora può essere espanso o compresso dinamicamente. Grande.

Beh, un po' fantastico, ma non del tutto. Sebbene il menu di navigazione ora possa espandersi e contrarsi, non funziona bene con il resto della pagina. Il menu di navigazione espanso ora si sovrappone al navigatore secondario, il che non è sicuramente il comportamento desiderato.

Questo rivela uno dei limiti chiave dei CSS2; vale a dire , c'è troppo che deve essere codificato con valori di posizione fissi. Di conseguenza, per gli altri elementi della pagina che devono essere riposizionati per ospitare il menu di navigazione espanso, è necessario definire classi CSS "espanse" aggiuntive con valori di posizione ancora più fissi.

 #subnav { left: 6em; width: 13em; &.expanded { left: 11em; /* move it on over */ } } #main { margin: 6em 0 4em 20; z-index: 10; &.expanded { margin-left: 25em; /* move it on over */ } }

Abbiamo quindi bisogno di estendere il nostro codice JavaScript per aggiungere la regolazione dinamica anche di questi altri elementi quando l'utente fa clic sull'interruttore di navigazione:

 $('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav, #subnav, #main').toggleClass('expanded'); });

OK, funziona meglio.

Variazioni di layout utilizzando le tecniche CSS2 classiche

Ora affrontiamo il requisito di avere alcune pagine che nascondono il menu di navigazione secondaria. In particolare, vogliamo che il menu di navigazione secondaria sia nascosto quando l'utente fa clic sull'icona "utenti" nell'area di navigazione principale.

Quindi, per prima cosa, creeremo una nuova classe "nascosta" che applica display: none :

 .hidden { display: none; }

E ancora, useremo JavaScript (jQuery) per applicare la classe CSS "nascosta" all'elemento #subnav quando l'utente fa clic sull'icona degli utenti:

 $('#nav.fa-user').on('click', function() { $('#subnav').toggleClass('hidden'); });

Con questa aggiunta, l'elemento #subnav viene correttamente nascosto quando l'utente fa clic sull'icona "utenti", ma lo spazio che aveva occupato rimane inutilizzato , anziché gli altri elementi che si espandono per utilizzare lo spazio lasciato libero dall'elemento #subnav .

Per ottenere il comportamento desiderato quando nascondiamo l'elemento #subnav , utilizzeremo uno dei selettori CSS meno conosciuti, ma molto utili, noti come selettore di fratelli adiacenti .

Selettore CSS fratello adiacente

Il selettore di pari livello adiacente consente di specificare due elementi, selezionando solo le istanze del secondo elemento che seguono immediatamente il primo elemento specificato.

Ad esempio, quanto segue selezionerà solo quegli elementi con l'ID main che seguono immediatamente un elemento con l'ID subnav :

 #subnav + #main { margin-left: 20em; }

Lo snippet CSS sopra imposta il margine sinistro di #main su 20em se e solo se segue immediatamente un #subnav visualizzato.

Tuttavia, se #nav è espanso (che fa sì che anche la classe expanded venga aggiunta a #main , in base al nostro codice precedente), spostiamo il margine sinistro di #main a 25em.

 #subnav + #main.expanded { margin-left: 25em; }

E, se #subnav è nascosto, spostiamo il margine sinistro di #main fino a 6em per essere proprio accanto a #nav :

 #subnav.hidden + #main { margin-left: 6em; }

(Nota: uno svantaggio dell'utilizzo del selettore di pari livello adiacente è che ci obbliga ad avere sempre #subnav presente nel DOM, indipendentemente dal fatto che venga visualizzato o meno.)

Infine, se #subnav è nascosto e #nav è espanso, impostiamo il margine sinistro di #main a 11em :

 #subnav.hidden + #main.expanded { margin-left: 11em; }

Questo ci consente di collegare le cose insieme senza alcun codice JavaScript pesante, ma possiamo anche vedere quanto può diventare complicato questo codice se aggiungiamo più elementi alla pagina. Vediamo ancora una volta che, con CSS2, è necessario molto hardcoding dei valori di posizione per far funzionare le cose correttamente.

Sfruttando CSS3

CSS3 offre funzionalità e tecniche di layout notevolmente migliorate che lo rendono molto più facile da usare e molto meno dipendente dai valori hardcoded. CSS3 è intrinsecamente progettato per supportare un comportamento più dinamico ed è, in questo senso, più "programmabile". Esaminiamo alcune di queste nuove funzionalità in relazione al nostro caso d'uso.

CSS3 `calc()` Funzione

La nuova funzione CSS3 calc() può essere utilizzata per calcolare i valori delle proprietà CSS in modo dinamico (nota, tuttavia, che il supporto varia da browser a browser). L'espressione fornita alla funzione calc() può essere qualsiasi espressione semplice che combina gli operatori aritmetici di base ( + , - , * , / ) utilizzando le regole di precedenza degli operatori standard.

L'uso della funzione calc() può aiutare a evitare gran parte dell'hardcoding dei valori richiesto dai CSS2. Nel nostro caso, questo ci consente di ottenere l'espansione CSS in modo più dinamico. Per esempio:

 #nav, #subnav { position: fixed; height: calc(100% - 10em); /* replaces */ z-index: 20; }

Con la specifica height di cui sopra usando la funzione calc() , otteniamo lo stesso risultato che abbiamo ottenuto in CSS2 con top:6em e bottom:4em , ma in un modo molto più flessibile e adattivo, e senza la necessità di codificare la posizione top e bottom i valori.

Layout Flexbox CSS3

Flexbox è un nuovo layout introdotto in CSS3 (il supporto varia a seconda dei browser). Il layout flexbox semplifica la disposizione degli elementi su una pagina in un modo che si comporti in modo prevedibile su schermi di dimensioni, risoluzioni e dispositivi diversi. È quindi particolarmente utile nel contesto del responsive web design.

Le caratteristiche principali includono:

Il posizionamento degli elementi figlio è molto più semplice e i layout complessi possono essere ottenuti in modo più semplice e con un codice più pulito.
Gli elementi figlio possono essere disposti in qualsiasi direzione e possono avere dimensioni flessibili per adattarsi allo spazio espositivo.
Gli elementi figlio espandono automaticamente il contratto per adattarsi allo spazio libero disponibile.

Flexbox introduce il proprio insieme unico di termini e concetti. Alcuni di questi includono:

Contenitore flessibile. Un elemento con la relativa proprietà di display impostata su flex o inline-flex che funge da elemento contenitore per gli elementi flessibili.
Articolo flessibile. Qualsiasi elemento all'interno di un contenitore flessibile. (Nota: il testo contenuto direttamente in un contenitore flessibile è racchiuso in un elemento flessibile anonimo.)
Assi . Ogni layout flexbox ha una flex-directio che designa l' asse principale lungo il quale sono disposti gli articoli flex. L' asse trasversale è quindi l'asse perpendicolare all'asse principale.
Linee. Gli articoli flessibili possono essere disposti su una singola riga o su più righe in base alla proprietà flex-wrap .
Dimensioni. Gli equivalenti flexbox di altezza e larghezza sono main size e cross size , che specificano rispettivamente le dimensioni dell'asse principale e dell'asse trasversale del contenitore flessibile.

OK, quindi con quella breve introduzione, ecco il markup alternativo che possiamo usare se stiamo usando un layout flexbox:

 <body class="layout-flexbox"> <header></header> <div class="content-area"> <nav></nav> <aside></aside> <main></main> </div> <footer></footer> </body>

Per il nostro caso d'uso di esempio, il nostro layout principale (intestazione, contenuto, piè di pagina) è verticale, quindi imposteremo il nostro flexbox per utilizzare un layout di colonna:

 .layout-flexbox { display: flex; flex-direction: column; }

Sebbene il nostro layout principale sia verticale, gli elementi nella nostra area di contenuto (nav, subnav, main) sono disposti orizzontalmente. Ogni contenitore flessibile può definire solo una direzione (ad esempio, il suo layout deve essere orizzontale o verticale). Pertanto, quando il layout richiede più di questo (un caso comune è per un layout di app), possiamo annidare più contenitori uno dentro l'altro, ciascuno con un layout direzionale diverso.

Ecco perché abbiamo aggiunto un contenitore aggiuntivo (che ho chiamato content-area ) che avvolge #nav , #subnav e #main . In questo modo, il layout generale può essere verticale, mentre i contenuti dell'area del contenuto possono essere disposti orizzontalmente.

Ora per posizionare i nostri elementi flex useremo la proprietà flex che è una scorciatoia per flex: <flex-grow> <flex-shrink> <flex-basis>; . Queste tre proprietà flessibili sono quelle che determinano come i nostri articoli flessibili distribuiscono lo spazio libero rimanente tra di loro nella direzione del flusso, come segue:

flex-grow: specifica quanto può crescere un elemento rispetto al resto degli elementi flessibili all'interno dello stesso contenitore
flex-shrink: specifica come un articolo può ridursi rispetto al resto degli articoli flessibili all'interno dello stesso contenitore
flex-basis: specifica la dimensione iniziale di un articolo (cioè prima che si rimpicciolisca o cresca)

Contenitori flessibili CSS: Cross vs main

Impostare flex-grow e flex-shrink entrambi su zero significa che la dimensione dell'articolo è fissa e non aumenterà o si ridurrà per adattarsi allo spazio disponibile più o meno libero. Questo è ciò che facciamo per l'intestazione e il piè di pagina poiché hanno una dimensione fissa:

 #header { flex: 0 0 5em; } #footer { flex: 0 0 3em; }

Per fare in modo che un elemento occupi tutto lo spazio libero disponibile, imposta i suoi valori flex-grow e flex-shrink entrambi su 1 e imposta il suo valore flex-basis su auto . Questo è ciò che facciamo per l'area dei contenuti poiché vogliamo che occupi tutto lo spazio libero disponibile.

E come affermato in precedenza, vogliamo che gli elementi all'interno content-area siano disposti nella direzione della riga, quindi aggiungeremo display: flex ; e flex-direction: row; . Questo rende content-area un nuovo contenitore flessibile per #nav , #subnav e `#main.

Quindi ecco cosa si ottiene per il CSS per content-area :

 .content-area { display: flex; flex-direction: row; flex: 1 1 auto; /* take up all available space */ margin: 1em 0; min-height: 0; /* fixes FF issue with minimum height */ }

Nell'area del contenuto, sia #nav che #subnav hanno dimensioni fisse, quindi impostiamo la proprietà flex di conseguenza:

 #nav { flex: 0 0 5em; margin-right: 1em; overflow-y: auto; } #subnav { flex: 0 0 13em; overflow-y: auto; margin-right: 1em; }

(Nota che ho aggiunto overflow-y: hidden a queste specifiche CSS per superare il contenuto che supera e trabocca l'altezza del contenitore. Chrome in realtà non ne ha bisogno ma FireFox lo fa.)

#main occuperà il resto dello spazio libero:

 #main { flex: 1 1 auto; overflow-y: auto; }

Sembra tutto a posto, quindi ora aggiungiamo il nostro comportamento dinamico a questo e vediamo come va.

Il JavaScript è identico a quello che avevamo prima (tranne qui, la classe contenitore di elementi CSS che stiamo specificando è layout-flexbox mentre prima era layout-classic ):

 $('.layout-flexbox #nav').on('click', 'li.nav-toggle', function() { $('#nav').toggleClass('expanded'); });

Aggiungiamo la classe expanded ai CSS come segue:

 #nav { flex: 0 0 5em; /* collapsed size */ margin-right: 1em; overflow-y: auto; &.expanded { flex: 0 0 10em; /* expanded size */ } }

E voilà!

Nota che questa volta non è necessario informare gli altri elementi della modifica della larghezza, poiché il layout flexbox gestisce tutto ciò per noi.

L'unica cosa rimasta è nascondere il sub nav. E indovina cosa? Anche questo "funziona", senza ulteriori modifiche, utilizzando lo stesso codice JavaScript di prima. Flexbox conosce lo spazio libero e fa funzionare automaticamente il nostro layout senza codice aggiuntivo. Abbastanza bello.

Flexbox fornisce anche alcuni modi interessanti per centrare elementi sia verticali che orizzontali. Ci rendiamo conto qui quanto sia importante per un linguaggio di presentazione includere la nozione di spazio libero e quanto il nostro codice possa diventare scalabile usando questo tipo di tecniche. D'altra parte, i concetti e la notazione qui possono richiedere un po' più di padronanza rispetto ai classici CSS.

Layout griglia CSS3

Se il layout Flexbox è all'avanguardia di CSS3, si potrebbe dire che il layout della griglia è all'avanguardia. La specifica W3C è ancora in uno stato di bozza e ha ancora un supporto browser abbastanza limitato. (È abilitato in Chrome tramite il flag "caratteristiche sperimentali della piattaforma Web" in chrome://flags).

Detto questo, personalmente non considero questo progetto rivoluzionario. Piuttosto, come affermano i principi di progettazione di HTML5: "Quando una pratica è già diffusa tra gli autori, considera di adottarla piuttosto che vietarla o inventare qualcosa di nuovo".

Di conseguenza, le griglie basate sul markup sono state utilizzate per molto tempo, quindi ora CSS Grid Layout sta davvero seguendo lo stesso paradigma, offrendo tutti i suoi vantaggi e molto altro nel livello di presentazione senza requisiti di markup.

L'idea generale è quella di avere un layout della griglia predefinito, fisso o flessibile in cui possiamo posizionare i nostri elementi. Come il flexbox, funziona anche secondo il principio dello spazio libero e ci consente di definire "direzioni" verticali e orizzontali nello stesso elemento, il che porta vantaggi in termini di dimensioni del codice e flessibilità.

Il layout della griglia introduce 2 tipi di griglie; vale a dire, esplicito e implicito . Per semplicità, ci concentreremo su griglie esplicite in questo.

Come flexbox, il layout Grid introduce il proprio insieme unico di termini e concetti. Alcuni di questi includono:

Contenitore a griglia. Un elemento con la sua proprietà di display impostata su "grid" o "inline-grid" in cui gli elementi contenuti sono disposti posizionandosi e allineando a una griglia predefinita (modalità esplicita). La griglia è un insieme intersecante di linee della griglia orizzontali e verticali che dividono lo spazio del contenitore della griglia in celle della griglia. Ci sono due serie di linee della griglia; uno per definire le colonne ed uno ad esso ortogonale per definire le righe.
Traccia della griglia. Lo spazio tra due linee della griglia adiacenti. A ciascuna traccia della griglia viene assegnata una funzione di ridimensionamento, che controlla la larghezza o l'altezza della colonna o della riga e quindi la distanza tra le linee della griglia di delimitazione.
Cella della griglia. Lo spazio tra due righe adiacenti e due linee della griglia di colonne adiacenti. È l'unità più piccola della griglia a cui è possibile fare riferimento durante il posizionamento degli elementi della griglia.
Lunghezza flessibile. Una dimensione specificata con l'unità fr , che rappresenta una frazione dello spazio libero nel contenitore della griglia.

Ecco il markup alternativo che possiamo usare se utilizziamo un layout Griglia:

 <body class="layout-grid"> <header></header> <nav></nav> <aside></aside> <main></main> <footer></footer> </body>

Nota che con questo layout, non abbiamo bisogno di un wrapper aggiuntivo per l'area del contenuto come abbiamo fatto per flexbox, poiché questo tipo di layout ci consente di definire la designazione dello spazio degli elementi in entrambe le direzioni nello stesso contenitore della griglia.

Analizziamo ora il CSS:

 .layout-grid { display: grid; grid-template-columns: auto 0 auto 1em 1fr; grid-template-rows: 5em 1em 1fr 1em 3em; }

Abbiamo definito display: grid; sul nostro contenitore. Le proprietà grid-template-columns e grid-template-rows sono specificate ciascuna come un elenco di spazi tra le tracce della griglia. In altre parole, quei valori non sono la posizione delle linee della griglia; piuttosto, rappresentano la quantità di spazio tra due tracce.

Si noti che le unità di misura possono essere specificate come:

una lunghezza
una percentuale della dimensione del contenitore della griglia
una misura del contenuto che occupa la colonna o riga, o
una frazione dello spazio libero nella griglia

Quindi con grid-template-columns: auto 0 auto 1em 1fr; avremo:

1 traccia che definisce 2 colonne di larghezza auto ( #nav di navigazione)
1 grondaia di 0 (il margine per #subnav è a livello di elemento, in quanto può essere presente o meno, in questo modo evitiamo di avere doppia grondaia)
1 traccia che definisce 2 colonne di larghezza auto ( #subnav space)
1 grondaia di 1 1em
1 traccia usando 1fr per #main (occupa tutto lo spazio rimanente)

Qui utilizziamo pesantemente il valore auto per la traccia, che ci consente di avere colonne dinamiche in cui la posizione e la dimensione delle linee sono definite dal loro contenuto massimo. (Dovremo quindi specificare le dimensioni per gli elementi #nav e #subnav , cosa che faremo a breve.)

Allo stesso modo, per le linee di riga abbiamo righe grid-template-rows: 5em 1em 1fr 1em 3em; che imposta il nostro #header e #footer da correggere e tutti gli elementi in mezzo per utilizzare lo spazio libero rimanente durante l'utilizzo 1em grondaie.

Ora vediamo come posizioniamo gli elementi effettivi da posizionare nella nostra griglia definita:

 #header { grid-column: 1 / 6; grid-row: 1 / 2; } #footer { grid-column: 1 / 6; grid-row: 5 / 6; } #main { grid-column: 5 / 6; grid-row: 3 / 4; overflow-y: auto; }

Questo specifica che vogliamo che la nostra intestazione sia compresa tra la linea della griglia 1 e 6 (a tutta larghezza) e tra le linee della griglia 1 e 2 per le nostre righe. Lo stesso per il piè di pagina, ma tra le ultime due righe (anziché le prime due). E l'area principale è impostata in modo appropriato per lo spazio che dovrebbe occupare.

Si noti che le proprietà grid-column e grid-row sono scorciatoie per specificare rispettivamente grid-column-start / grid-column-end e grid-row-start / grid-row-end .

OK, quindi torniamo a #nav e #subnav . Dato che in precedenza abbiamo posizionato #nav e #subnav nella traccia con valori automatici, dobbiamo specificare quanto siano larghi questi elementi (lo stesso per la modalità espansa, cambiamo solo la sua larghezza e il layout della griglia si occupa del resto).

 #nav { width: 5em; grid-column: 1 / 2; grid-row: 3 / 4; &.expanded { width: 10em; } } #subnav { grid-column: 3 / 4; grid-row: 3 / 4; width: 13em; /* track has gutter of 0, so add margin here */ margin-left: 1em; }

Quindi ora possiamo attivare il nostro #nav e anche nascondere/rimuovere il #subnav e tutto funziona perfettamente! Il layout della griglia ci consente anche di utilizzare alias per le nostre linee, quindi alla fine la modifica delle griglie non interromperà il codice poiché è mappato su un nome e non su una linea della griglia. Sicuramente non vedo l'ora che questo sia più ampiamente supportato da più browser.

Conclusione

Anche con le tecniche CSS classiche, è possibile ottenere molto di più di quanto molti sviluppatori web realizzino o traggano vantaggio. Detto questo, gran parte di questo può essere piuttosto noioso e può comportare l'hardcoding dei valori ripetutamente in un foglio di stile.

CSS3 ha iniziato a fornire tecniche di layout molto più sofisticate e flessibili che sono notevolmente più facili da programmare e che evitano gran parte della noia delle precedenti specifiche CSS.

Padroneggiare queste tecniche e paradigmi, sia per CSS2 che CSS3, è essenziale per sfruttare tutto ciò che CSS ha da offrire al fine di ottimizzare sia l'esperienza dell'utente che la qualità del codice. Questo articolo rappresenta davvero solo la punta dell'iceberg di tutto ciò che c'è da imparare e tutto ciò che può essere realizzato con la potenza e la flessibilità dei CSS. Fallo!

Correlati: *Esplorazione di SMACSS: architettura scalabile e modulare per CSS*