Layout delle macro

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

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

Prima di applicare un layout, assicurati che il flusso dei contenuti sia logico. Questo ordinamento predefinito a colonna singola è quello che verrà visualizzato sugli schermi più piccoli.

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

Quando disponi questi singoli componenti a livello di pagina, stai progettando un layout macro, ovvero una visualizzazione di alto livello della pagina. Utilizzando le query supporti, puoi fornire regole in CSS che descrivono come questa visualizzazione deve adattarsi alle diverse dimensioni dello schermo.

Griglia

La griglia CSS è uno strumento eccellente per applicare un layout alla pagina. Nell'esempio precedente, supponiamo che tu voglia un layout a due colonne quando è disponibile una 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 utilizzare anche flexbox. Gli stili sarebbero simili a questi:

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

Hai bisogno di una query supporti?

Potresti non aver sempre bisogno di utilizzare una query supporti. Le query supporti funzionano bene quando applichi modifiche a pochi elementi, ma se il layout deve essere aggiornato spesso, le query supporti potrebbero diventare difficili da gestire 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 inserirne il maggior numero possibile su una riga. Potresti scrivere query supporti con punti di interruzione come 30em, 45em e 60em, ma è un'operazione piuttosto lunga e difficile da gestire.

In alternativa, puoi applicare regole in modo che le schede 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 si estenderanno per riempire lo spazio disponibile anziché allinearsi 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;
}

Applicando alcune regole intelligenti in flexbox o nella griglia, è possibile progettare layout macro dinamici con CSS minimo e senza query supporti. In questo modo, il tuo lavoro sarà minore, perché il browser si occuperà dei calcoli. Per vedere alcuni esempi di layout CSS moderni che sono fluidi senza richiedere query supporti, visita 1linelayouts.com.

Mettiti alla prova

Metti alla prova le tue conoscenze sui layout macro.

Quale frase descrive meglio i layout macro?

Layout che contengono altri layout.
Riprova. La maggior parte dei layout contiene altri layout.
Quando un design utilizza flexbox o la griglia.
Riprova. Né flexbox né la griglia hanno qualcosa di specifico per i layout macro.
Layout di basso livello che coprono piccole quantità di schermo.
Riprova.
Layout di alto livello che coprono grandi quantità di schermo.
🎉 I layout macro sono layout fondamentali per una pagina, che coprono grandi quantità di area visiva e spesso vengono regolati con query supporti per le dimensioni della pagina.

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

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

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

Indietro
Internazionalizzazione
Avanti
Micro layout