Micro layout

Quando pensiamo ai layout, spesso ci riferiamo a design a livello di pagina. Tuttavia, i componenti più piccoli all'interno della pagina possono avere layout autonomi.

Idealmente, questi layout a livello di componente si adatteranno automaticamente, indipendentemente dalla loro posizione nella pagina. Potrebbero esserci situazioni in cui non sai se un componente verrà inserito nella colonna dei contenuti principali, nella barra laterale o in entrambe. Senza sapere con certezza dove finirà un componente, devi assicurarti che possa adattarsi al suo contenitore.

Griglia

La griglia CSS non è solo per i layout a livello di pagina. Funziona bene anche per i componenti al loro interno.

In questo esempio, gli pseudo-elementi ::before e ::after creano linee decorative su entrambi i lati di un'intestazione. L'intestazione stessa è un contenitore griglia. I singoli elementi sono disposti in modo che le linee riempiano sempre lo spazio disponibile.

h1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1em;
}
h1::before,
h1::after {
  content: "";
  border-top: 0.1em double black;
  align-self: center;
}

Scopri come ispezionare i layout a griglia in Chrome DevTools.

Flexbox

Come suggerisce il nome, puoi utilizzare flexbox per rendere flessibili i tuoi componenti. Puoi dichiarare quali elementi del componente devono avere una dimensione minima o massima e lasciare che gli altri elementi si adattino di conseguenza.

In questo esempio, l'immagine occupa un quarto dello spazio disponibile e il testo occupa i tre quarti rimanenti. ma l'immagine non supera mai i 200 pixel.

.media {
  display: flex;
  align-items: center;
  gap: 1em;
}
.media-illustration {
  flex: 1;
  max-inline-size: 200px;
}
.media-content {
  flex: 3;
}

Scopri come ispezionare i layout flexbox in Chrome DevTools.

Query sui contenitori

Flexbox ti consente di progettare partendo dai contenuti. Puoi specificare i parametri degli elementi (quanto devono essere stretti, quanto devono essere larghi) e lasciare che il browser determini l'implementazione finale.

ma il componente stesso non è consapevole del suo contesto. Non sa se viene utilizzato nel contenuto principale o in una barra laterale. Questo può rendere i layout dei componenti più complessi di quelli delle pagine. Per poter applicare stili pertinenti al contesto, i componenti devono conoscere più della dimensione della finestra di visualizzazione in cui si trovano.

Con i layout di pagina, conosci la larghezza del contenitore perché il contenitore è la finestra del browser; le media query riportano le dimensioni del contenitore a livello di pagina.

Per segnalare le dimensioni di qualsiasi contenitore, utilizza le query sui contenitori.

Per iniziare, definisci quali elementi fungono da contenitori.

main,
aside {
  container-type: inline-size;
}

Ciò significa che vuoi eseguire una query sulla dimensione in linea. Per i documenti in inglese, si tratta dell'asse orizzontale. Stai per modificare gli stili in base alla larghezza del contenitore.

Se un componente si trova all'interno di uno di questi contenitori, puoi applicare gli stili in modo simile a come applichi le media query.

.media-illustration {
  max-width: 200px;
  margin: auto;
}

@container (min-width: 25em) {
  .media {
    display: flex;
    align-items: center;
    gap: 1em;
  }

  .media-illustration {
    flex: 1;
  }

  .media-content {
    flex: 3;
  }
}

Se un oggetto multimediale si trova all'interno di un contenitore più stretto di 25em, gli stili flexbox non vengono applicati. L'immagine e il testo sono disposti verticalmente.

Tuttavia, se l'elemento contenitore è più largo di 25em, l'immagine e il testo vengono visualizzati uno accanto all'altro.

Con le query sui contenitori, puoi definire lo stile dei componenti in modo indipendente. Puoi scrivere regole basate sulla larghezza dell'elemento contenitore; la larghezza dell'area visibile non è più importante.

Combinare le query

Puoi utilizzare le media query per il layout della pagina e le query sui contenitori per i componenti all'interno della pagina.

In questo caso, la struttura generale della pagina è costituita da un elemento main e da un elemento aside. Entrambi gli elementi contengono oggetti multimediali.

<body>
  <main>
     <div class="media">…</div>
     <div class="media">…</div>
  </main>
  <aside>
     <div class="media">…</div>
  </aside>
</body>

Una media query applica un layout a griglia agli elementi main e aside quando l'area visibile è più larga di 45em.

@media (min-width: 45em) {
  body {
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
}

La regola di query del contenitore per gli oggetti multimediali rimane la stessa: applica un layout flessibile orizzontale solo se l'elemento contenitore è più largo di 25em.

Le query sui contenitori sono una svolta per i micro layout. I componenti possono essere autonomi, indipendenti dalla finestra del browser.

Mettiti alla prova

Metti alla prova le tue conoscenze sui micro layout.

In precedenza hai esaminato i layout delle macro a livello di pagina. Ora conosci i micro layout a livello di componente.

Poi, approfondiremo i componenti di base dei tuoi contenuti e impareremo a rendere le immagini adattabili. Innanzitutto, scoprirai la tipografia reattiva.