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