I layout delle macro descrivono l'organizzazione più ampia e a livello di pagina della tua interfaccia.
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?
I layout delle macro utilizzano sempre le query supporti per adattarsi alle diverse dimensioni dello schermo?
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.