Come combinare griglie Flexbox e CSS per layout efficienti

Nota del redattore: questo guest post è stato scritto da Abbey Fitzgerald, un ingegnere del software UX e web designer che ama l'arte di creare codice.

In passato, le proprietà float CSS erano uno dei metodi principali per disporre gli elementi su un sito web. E se hai mai lavorato in questo modo, sai che non è sempre l'ideale per layout complessi. Fortunatamente nell'era moderna del web design, l'allineamento degli elementi è diventato molto più snello grazie a Flexbox e CSS Grids.

Quando è arrivato Flexbox, ha reso l'allineamento molto più semplice e da allora è stato ampiamente adottato. I CSS Grid Layouts hanno anche creato molto entusiasmo nella comunità del web design. Qualche tempo fa, abbiamo dato un'occhiata a come creare un layout di griglia CSS di base. Sebbene non sia ampiamente adottato, i browser stanno iniziando ad adottarne il supporto. Quando sarà completamente supportato, avrà un grande impatto sui progetti. Il supporto del browser è in costante aumento; assicurati di controllare Posso usare per le informazioni più aggiornate.

Ora ti starai chiedendo cosa c'è dopo; dopotutto, Flexbox e CSS Grid Layouts sembrano ottenere risultati simili. Tuttavia, non è un dibattito tra Flexbox e Grid, ma piuttosto imparare a usarli insieme. Più ho giocato sia con Grid che con Flexbox, ho scoperto che non devi scegliere solo l'uno o l'altro. Nel prossimo futuro, quando CSS Grid Layout avrà il pieno supporto del browser, i progettisti saranno in grado di sfruttare i vantaggi combinati di ciascuno e creare i progetti più efficienti e interessanti.

Testare i layout di base Flexbox e CSS Grid

Per determinare se Flexbox o CSS Grid funzionano meglio per il tuo flusso di lavoro di sviluppo, creare un layout standard che utilizza solo l'uno o l'altro è un buon modo per vedere come funzionano e se ci sono vantaggi dell'uno rispetto all'altro. Inizieremo con un tipo di layout molto semplice e familiare con intestazione, barra laterale, contenuto principale e piè di pagina. Un layout semplice come questo è un modo rapido per posizionare i vari elementi.

E ricorda, non dovresti mai apportare modifiche al tuo sito live. Prova invece a sperimentare con Local, un'app di sviluppo WordPress locale gratuita. Scaricalo oggi!

Come creare un layout con Flexbox

Di recente, ho trattato l'argomento della creazione di un layout di scheda Flexbox. Quel post approfondisce il funzionamento di Flexbox insieme a specifiche informazioni CSS, quindi se sei un principiante di Flexbox, ti aiuterà a familiarizzare con il suo funzionamento.

Per questo tutorial, ecco cosa costruiremo:

Vedi questo su Codepen.

Per questo layout di base, le attività principali di Flexbox includono:

• Crea intestazione e piè di pagina a tutta larghezza
• Posiziona la barra laterale accanto all'area del contenuto principale
• Dimensionamento corretto della barra laterale e dell'area del contenuto principale
• Posizionamento degli elementi di navigazione

Struttura HTML di base

 <div class="contenitore">
        
    <intestazione>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <pulsante></pulsante>
    </header>
    <div class="wrapper">
        <aside class="sidebar">
            <h3></h3>
        </aside>
        <section class="main">
            <h2></h2>
            <p></p>
        </section>
    </div><!-- /wrapper -->
    <piè di pagina>
        <h3></h3>
        <p></p>
    </footer>
</div><! --/contenitore -->

Come usare il display flessibile

Stile dell'intestazione

Partendo dall'esterno e lavorando all'interno, aggiungendo display: flex; al contenitore è il primo passo in qualsiasi layout Flexbox. La direzione flessibile è impostata su colonna, quindi posizionerà tutte le sezioni una sotto l'altra.

 .contenitore {
    display: flessibile;
    direzione flessibile: colonna;
}

La creazione di un'intestazione a tutta larghezza è stata piuttosto automatica con il display: flex; (le intestazioni sono un elemento a livello di blocco per impostazione predefinita). A causa di questa dichiarazione, consentirà un facile posizionamento degli elementi di navigazione.

C'è un logo e due voci di menu nella navigazione a sinistra con un pulsante di accesso a destra. Il nav è nell'intestazione, quindi avendo justify-content: space-between; la navigazione e il pulsante verranno distanziati automaticamente.

Una cosa utile è quanto sia facile allineare il testo. Nella navigazione, con align-items: baseline; , tutti gli elementi di navigazione sono allineati alla linea di base del testo in modo da avere un aspetto più uniforme.

 intestazione{
    imbottitura: 15px;
    margine inferiore: 40px;
    display: flessibile;
    giustifica-contenuto: spazio-tra;
}
intestazione nav ul {
    display: flessibile;
    align-items: linea di base;
    tipo-stile-lista: nessuno;
}

Stile del contenuto della pagina

Successivamente, c'è la barra laterale e le aree del contenuto principale con un wrapper che include i due. Anche il div con una classe .wrapper necessita del display: flex; ma la direzione della flessione è diversa da quella sopra. Poiché la barra laterale e le aree del contenuto sono una accanto all'altra anziché impilate, la direzione flessibile lo è

Successivamente, c'è la barra laterale e le aree del contenuto principale con un wrapper che include i due. Anche il div con una classe .wrapper necessita del display: flex; ma la direzione della flessione è diversa da quella sopra. Poiché la barra laterale e le aree del contenuto sono una accanto all'altra anziché impilate, la direzione flessibile è la riga, che è l'opposto di ciò che è stato fatto nel contenitore sopra.

 .involucro {
    display: flessibile;
    direzione flessibile: riga;
} 

La dimensione della sezione principale e della barra laterale è molto importante poiché le informazioni più importanti risiedono qui. Il contenuto principale dovrebbe essere tre volte più grande della barra laterale, il che è abbastanza facile da fare con Flexbox.

 .principale {
    flessibilità: 3;
    margine destro: 60px;
}
.sidebar {
   flessibilità: 1;
}

Per questo frammento di codice, ho usato la scorciatoia. I valori flex sono per la proprietà flex-grow. Flex-grow è potente perché questo è quanto gli articoli cresceranno rispetto al resto degli articoli flessibili all'interno dello stesso contenitore.

Nel complesso, Flexbox è stato piuttosto efficiente nel creare questo semplice layout. È stato particolarmente utile avere il controllo sullo stile degli elementi dell'elenco e sulla spaziatura tra la navigazione e il pulsante.

Come creare un layout con layout a griglia CSS

Per testare l'efficienza, il passaggio successivo consiste nel creare lo stesso layout di base con CSS Grid. Gli elementi della pagina sono tutti uguali e verranno posizionati allo stesso modo dell'esempio Flexbox.

Vedi questo su Codepen.

Aree del modello di griglia

Una cosa utile con CSS Grid è la possibilità di specificare le aree del modello, che possono rendere la definizione dei layout molto intuitiva. Adottando questo approccio, le aree sulla griglia possono essere denominate e referenziate per posizionare gli elementi. Per questo layout di base, ci sono quattro elementi che dovremo nominare:

• intestazione
• contenuto principale
• barra laterale
• piè di pagina

Struttura HTML di base

 <div class="contenitore">
        
    <intestazione>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <pulsante></pulsante>
    </header>
  
    <aside class="sidebar">
        <h3></h3>
        <ul>
            <li></li>
        	<li></li>
	<li></li>
	<li></li>
	<li></li>
          </ul>
    </aside>
    <section class="main">
        <h2></h2>
        <p></p>
         <p> </p>
  </section>
    <piè di pagina>
        <h3></h3>
        <p></p>
    </footer>
</div>

Definiremo queste aree sul nostro contenitore della griglia in ordine, un po' come disegnarle. Li spazierò anche per leggibilità.

 aree-modello-griglia:
        "intestazione intestazione"
        "barra laterale principale"
        "piè di pagina piè di pagina";

Nota come la barra laterale è stata elencata prima di main? Cambiandoli cambierebbe anche l'ordine sulla pagina. Attualmente, la barra laterale è a sinistra e il contenuto principale è a destra, ma puoi facilmente cambiarlo se necessario.

Una cosa da notare: questi nomi devono essere "collegati" allo stile. Solo perché sono state dichiarate grid-template-aree, non sappiamo dove appartenga effettivamente l'intestazione. Nel blocco di intestazione, grid-area: header; deve essere aggiunto.

 intestazione{
    grid-area: intestazione;
    imbottitura: 20px 0;
    visualizzazione: griglia;
    griglia-template-colonne: 1fr 1fr;
}

La struttura HTML è la stessa dell'esempio Flexbox, ma il CSS è abbastanza diverso per creare il layout della griglia.

 .contenitore{
    larghezza massima: 900px;
    colore di sfondo: #fff;
    margine: 0 automatico;
    imbottitura: 0 60px;
    visualizzazione: griglia;
    griglia-template-colonne: 1fr 3fr;
    aree-modello-griglia:
        "intestazione intestazione"
        "barra laterale principale"
        "piè di pagina piè di pagina";
    gap di griglia: 50px;
}

Per iniziare a lavorare con un CSS Grid Layout, è molto importante avere display: grid; posto sul contenitore. Le colonne-modello-griglia sono dichiarate qui per dare la struttura complessiva della pagina. Ricordi come l'esempio Flexbox aveva la classe .main impostata su un flex-grow di 3 e la barra laterale aveva un flex-grow di 1 per stabilire il dimensionamento? Qui le colonne del modello di griglia 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.

Successivamente, le unità fr utilizzate per il contenitore devono essere regolate per l'intestazione. Le colonne del modello di griglia sono state adattate a 1fr e 1fr. In questo modo ci sono due colonne di dimensioni uguali e gli elementi di navigazione e il pulsante si adatteranno.

 intestazione{
    grid-area: intestazione;
    visualizzazione: griglia;
    griglia-template-colonne: 1fr 1fr;
} 

Per posizionare il pulsante, dobbiamo solo usare justify-self e impostarlo su end.

 pulsante di intestazione {
    giustificarsi: fine;
}

La navigazione è posizionata dove deve essere:

 intestazione nav {
    giustifica-auto: inizio;
}

Il piè di pagina a larghezza intera non richiede l'impostazione di colonne diverse poiché il contenuto si trova nel mezzo.

Come creare un layout con griglie Flexbox e CSS

Ora che abbiamo visto cosa può fare ogni metodo individualmente, è il momento di creare qualcosa di più complesso combinando Flexbox e CSS Grid Layouts.

Vedi questo su Codepen.

Ecco lo schema di base per far funzionare la griglia:

Vedi questo su Codepen.

Nota come il design si basa sia su colonne che su righe? Questo layout ha bisogno che le cose si allineino e si comportino in modo coerente in entrambe le direzioni, quindi l'utilizzo di CSS Grid è efficiente per il layout generale.

La pianificazione è fondamentale con un layout come questo. È una buona idea abbozzarlo prima e vedere come si accumulano le cose, letteralmente. Per iniziare il codice, avendo display: griglia; è essenziale; senza di esso, l'utilizzo di questo tipo di layout non funzionerà. Una cosa da notare qui è che c'è spazio tra i blocchi di contenuto. Ciò è stato ottenuto con griglia-colonna-gap e griglia-riga-gap.

 .contenitore {
  visualizzazione: griglia;
  colonne modello griglia: 0.4fr 0.3fr 0.3fr;
  spazio-colonna-griglia: 10px;
  spazio-riga-griglia: 15px;
}

Le unità frazionarie sono tornate per questo layout e ora sono necessarie tre aree. Il primo valore di 0.4fr è leggermente più ampio del secondo e del terzo, che sono entrambi 0.3fr.

Layout di colonne e righe

È qui che è importante fare riferimento al diagramma dall'inizio. Partendo dall'alto, ecco come viene posizionata l'intestazione. Si estende su tutte le colonne e una riga.

 .intestazione {
  griglia-colonna-inizio: 1;
  griglia-colonna-fine: 4;
  griglia-riga-inizio: 1;
  griglia-riga-fine: 2;
  colore di sfondo: #d5c9e2;
}

Se vuoi usare la scorciatoia, i valori iniziale e finale sono sulla stessa riga e separati da una barra. Sembrerebbe così:

 .intestazione {
  griglia-colonna: 1 / 4;
  griglia-riga: 1 / 2;
  colore di sfondo: #55d4eb;
}

Per posizionare tutti gli altri elementi, è sufficiente aggiungere al CSS i valori della griglia e della colonna corretti. Piuttosto che esaminarli qui uno per uno, questo esempio è su Codepen.

Dopo aver creato il layout della griglia, il passaggio successivo è la messa a punto del contenuto.

Navigazione

Flexbox è perfetto per posizionare gli elementi di intestazione. L'esempio di layout di base ha toccato questo aspetto con justify-content: space-between. L'esempio della griglia doveva avere justify-self: start; sulla navigazione e giustificarsi: fine; per il pulsante per posizionare le cose, ma Flexbox ha reso più facile la spaziatura per la navigazione.

 .intestazione {
  griglia-colonna: 1 / 4;
  griglia-riga: 1 / 2;
  colore: #9f9c9c;
  text-transform: maiuscolo;
  border-bottom: 2px solido #b0e0ea;
  imbottitura: 20px 0;
  display: flessibile;
  giustifica-contenuto: spazio-tra;
  align-items: centro;
} 

Questo stesso formato sarà seguito qui. Il logo, le voci di menu e il pulsante utilizzavano il contenuto giustificato di Flexbox per la spaziatura.

Griglia del contenuto della colonna

Per le occasioni che richiedono che gli elementi si allineino in una direzione, il che significa che è più "unidimensionale", in genere Flexbox è l'opzione migliore. Inoltre, Flexbox è bravo a ridimensionare dinamicamente gli elementi. Forse hai provato questo in una fila di caselle aggiungendo display:flex; su un elemento genitore e proprietà flex sugli elementi figli. Con quella tecnica, si forma una bella linea ed è un modo efficiente per assicurarsi che tutti gli elementi abbiano la stessa altezza.

Contenuto riga con testo e pulsanti

Nella sezione “contenuti extra” sono state aggiunte tre aree con testo e pulsanti. Flexbox semplifica il mantenimento della larghezza impostata per tre colonne.

 .extra {
  griglia-colonna: 2 / 4;
  griglia-riga: 4 / 5;
  imbottitura: 1rem;
  display: flessibile;
  flex-wrap: avvolgere;
  bordo: 1px solido #ececec;
  giustifica-contenuto: spazio-tra;
}

Un'eccezione Flexbox

Sì, ho detto che Flexbox è migliore per layout, griglie o colonne unidimensionali, ma se leggi il post Come utilizzare Flexbox per creare un moderno layout di progettazione di carte CSS, c'era un hack Flexbox "ultima riga" che è stato dimostrato per mantenere in equilibrio righe e colonne, anche senza un numero pari di carte.

 .immagini-correlate {
  griglia-colonna: 1 / 3;
  griglia-riga: 5 / 6;
  visualizzazione: griglia;
  colonne-modello-griglia: ripetizione(4,1fr);
  interspazio griglia: 1rem;
}
.immagini-correlate .icon {
    colore di sfondo: bianco;
    flessibile: 1 1 150px;
}

Riepilogo dell'approccio progettuale

Fondamentalmente, l'approccio che ho adottato qui è stato quello di utilizzare CSS Grid Layout per il layout generale (e tutto ciò che non era lineare nel design). All'interno delle aree di contenuto della griglia, Flexbox è stato utilizzato per ordinare e perfezionare lo stile all'interno delle aree della griglia.

Risorse

Ci sono così tante fantastiche risorse là fuori per Flexbox e CSS Grid Layouts, troppe da menzionare. Eccone alcuni che ti faranno iniziare nella giusta direzione e ispireranno i tuoi layout.

• Cheatsheet sull'allineamento delle scatole
• Laboratorio di layout di Jen Simmons
• Una guida completa alla griglia
• Una guida completa a Flexbox

Si spera che questi esercizi ti abbiano dato un'idea migliore di come creare layout con CSS Grid Layouts e Flexbox. Cosa ne pensi di queste nuove tecnologie? In che modo hanno aiutato il tuo processo di sviluppo?