Layout delle macro

I layout delle macro descrivono l'organizzazione più ampia e a livello di pagina della tua interfaccia.

Un reticolo di un layout a due colonne accanto allo stesso layout di una colonna per una visualizzazione ristretta.

Prima di applicare un layout, assicurati che il flusso sia comprensibile. L'ordinamento predefinito a colonna singola è quello che otterranno gli schermi più piccoli.

<body>
  <header>…</header>
  <main>
    <article>…</article>
    <aside>…</aside>
  </main>
  <footer>…</footer>
</body>

Quando disponi di questi componenti a livello di pagina, disegna un layout macro: una visualizzazione di alto livello della pagina. Con le query supporti, puoi fornire regole in CSS che descrivono in che modo questa visualizzazione deve adattarsi alle diverse dimensioni dello schermo.

Griglia

La griglia CSS è un ottimo strumento per applicare un layout alla tua pagina. Nell'esempio precedente, supponiamo che tu voglia un layout a due colonne quando la larghezza dello schermo è sufficiente. Per applicare questo layout a due colonne quando il browser è abbastanza largo, utilizza una query supporti per definire gli stili della griglia sopra un punto di interruzione specificato.

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Flexbox

Per questo layout specifico, puoi anche utilizzare flexbox. Gli stili saranno simili ai seguenti:

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }

  main article {
    flex: 2;
  }

  main aside {
    flex: 1;
  }
}

Tuttavia, la versione flexbox richiede più CSS. Ogni colonna ha una regola distinta per descrivere quanto spazio deve occupare. Nell'esempio della griglia, le stesse informazioni sono racchiuse in una regola per l'elemento che lo contiene.

Hai bisogno di una query supporti?

Potrebbe non essere sempre necessario utilizzare una query supporti. Le query supporti funzionano bene quando applichi modifiche ad alcuni elementi, ma se il layout deve essere aggiornato molto, le query supporti potrebbero sfuggire di mano con molti punti di interruzione.

Supponiamo che tu abbia una pagina piena di componenti di schede. Le schede non sono mai più larghe di 15em e vuoi inserire in una riga il numero di schede che vuoi. Potresti scrivere query supporti con punti di interruzione pari a 30em, 45em, 60em e così via, ma è piuttosto noioso e difficile da gestire.

Puoi invece applicare regole in modo che le schede occupino automaticamente la giusta quantità di spazio.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  grid-gap: 1em;
}

Puoi ottenere un layout simile con Flexbox. In questo caso, se le schede non sono sufficienti per riempire l'ultima riga, le schede rimanenti si allungheranno per riempire lo spazio disponibile e non saranno allineate in colonne. Se vuoi allineare righe e colonne, utilizza la griglia.

.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}
.cards .card {
  flex-basis: 15em;
  flex-grow: 1;
}

Se applichi alcune regole intelligenti in flexbox o griglia, puoi progettare layout macro dinamici con un codice CSS minimo e senza query supporti. Il lavoro meno impegnativo è che tu stai costringendo il browser a fare i calcoli. Per vedere alcuni esempi di layout CSS moderni, fluidi e senza richiedere query supporti, consulta la pagina 1linelayouts.com.

Verifica la tua comprensione

Verifica le tue conoscenze dei layout di macro.

Quale frase descrive meglio i layout delle macro?

Layout che contengono altri layout.
Riprova. La maggior parte dei layout ne contiene altri.
Quando un design utilizza flexbox o griglia.
Riprova. Né flexbox né griglia hanno elementi specifici per i layout delle macro.
Layout di basso livello che coprono piccole quantità dello schermo.
Riprova.
Layout di alto livello che coprono grandi quantità dello schermo.
🎉 I layout delle macro sono layout di base per una pagina, che coprono grandi quantità di aree visive e spesso vengono regolati con query supporti a dimensione di pagina.

I layout delle macro utilizzano sempre le query supporti per adattarsi alle diverse dimensioni dello schermo?

Vero
Riprova. Un layout macro non è definito dall'utilizzo di query supporti.
falso
🎉 I layout delle macro possono adattarsi per adattarsi ai contenuti, riempire lo spazio disponibile e altro ancora, senza una query supporti.

Ora che hai capito alcune idee per i layout delle macro a livello di pagina, concentra l'attenzione sui componenti della pagina. Questo è l'ambito dei microlayout.