Layout delle macro

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

Un Wireframe con un layout a due colonne, accanto allo stesso layout di una colonna per una visualizzazione stretta.

Prima di applicare qualsiasi 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 i singoli componenti a livello di pagina, devi progettare un layout macro, ovvero una visualizzazione generale della tua pagina. Utilizzando le query supporti, puoi fornire regole in CSS che descrivono come questa vista 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 una volta che il browser è sufficientemente largo, usare 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, potresti anche utilizzare flexbox. Gli stili avranno il seguente aspetto:

@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 supporti. Le query supporti funzionano correttamente quando applichi modifiche ad alcuni elementi ma se il layout deve essere aggiornato molto, le tue query multimediali potrebbero sfuggire di mano 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. Puoi scrivere query supporti con punti di interruzione 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 non ci sono abbastanza schede per riempire l'ultima riga, le schede rimanenti si estenderanno fino a riempire lo spazio disponibile anziché essere 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, è possibile progettare layout macro dinamici con un CSS minimo e senza query supporti. 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é griglia hanno elementi specifici per i layout delle macro.
Layout di basso livello che coprono piccole parti dello schermo.
Riprova.
Layout di alto livello che coprono grandi quantità dello schermo.
🎉 I layout con macro sono layout di base per una pagina, che coprono grandi quantità di aree visive, e spesso vengono regolati 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 macro non è definito dall'uso di query supporti.
Falso
🎉 I layout delle macro possono adattarsi ai contenuti, riempire lo spazio disponibile e altro ancora, senza una query multimediale.

Ora che conosci alcune idee per i layout delle macro a livello di pagina, rivolgere l'attenzione ai componenti della pagina. Questo è il regno della micro layout.