Layout delle macro

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

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

Prima di applicare un layout, devi assicurarti che il flusso dei contenuti sia logico. L'ordinamento predefinito a colonna singola è quello che avranno gli schermi più piccoli.

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

Quando organizzi questi singoli componenti a livello di pagina, stai progettando un layout macro: una visualizzazione di alto livello della pagina. Utilizzando le query supporti, puoi fornire regole in CSS che descrivono in che modo questa visualizzazione deve adattarsi a schermi di dimensioni diverse.

Griglia

La griglia CSS è un ottimo strumento per applicare un layout alla tua pagina. Nell'esempio riportato sopra, 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 sui media 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, potresti anche utilizzare flexbox. Gli stili saranno simili a questo:

@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 separata per descrivere quanto spazio deve occupare. Nell'esempio della griglia, le stesse informazioni sono incapsulate in una regola per l'elemento contenitore.

Hai bisogno di una query supporti?

Potrebbe non essere sempre necessario utilizzare una query sui contenuti multimediali. Le query sui media funzionano bene quando applichi modifiche a pochi elementi, ma se il layout deve essere aggiornato molto, le query sui media potrebbero diventare ingestibili con molti punti di interruzione.

Supponiamo che tu abbia una pagina piena di componenti delle schede. Le carte non sono mai più larghe di 15em e vuoi inserire in una riga tutte le carte che vuoi. Potresti scrivere query sui media con breakpoint di 30em, 45em, 60em e così via, ma è un'operazione piuttosto tediosa e difficile da gestire.

In alternativa, puoi applicare regole in modo che le schede stesse occupino automaticamente la quantità di spazio corretta.

.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 non ci sono abbastanza schede per riempire l'ultima riga, le schede rimanenti verranno estese per riempire lo spazio disponibile anziché allinearsi in colonne. Se vuoi allineare le righe e le colonne, utilizza la griglia.

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

Applicando alcune regole intelligenti in flexbox o in griglia, è possibile progettare layout di macro dinamici con CSS minimo e senza query sui media. Meno lavoro per te, perché i calcoli vengono effettuati dal browser. Per vedere alcuni esempi di layout CSS moderni che sono fluidi senza richiedere query supporti, consulta 1linelayouts.com

Verifica le tue conoscenze

Verifica le tue conoscenze dei layout delle macro.

Quale frase descrive meglio i layout delle macro?

Layout che contengono altri layout.
Riprova. La maggior parte dei layout contiene altri layout.
Quando un progetto utilizza flexbox o griglia.
Riprova. Né flexbox né grid hanno elementi specifici per i layout macro.
Layout di basso livello che coprono piccole parti dello schermo.
Riprova.
Layout di alto livello che coprono gran parte dello schermo.
🎉 I layout con macro sono layout di base per una pagina, che coprono grandi quantità di aree visive, e spesso vengono modificati con query multimediali relative alle dimensioni della pagina.

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

Vero
Riprova. Un layout della macro non è definito dall'utilizzo delle media query.
Falso
🎉 I layout delle macro possono adattarsi ai contenuti, riempire lo spazio disponibile e altro ancora, senza una query multimediale.

Ora che hai alcune idee per i layout macro a livello di pagina, concentrati sui componenti all'interno della pagina. Questo è il regno della micro layout.