Micro layout

Quando pensiamo ai layout, spesso pensiamo a design a livello di pagina. Tuttavia, i componenti più piccoli di una pagina possono avere i propri layout indipendenti.

Idealmente, questi layout a livello di componente si regoleranno automaticamente, indipendentemente dalla loro posizione nella pagina. Possono verificarsi 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 il componente possa adattarsi al suo container.

GRid

La griglia CSS non è utile solo per i layout a livello di pagina. È ideale anche per i componenti che si trovano al loro interno.

In questo esempio, gli pseudo-elementi ::before e ::after creano linee decorative ai lati dell'intestazione. L'intestazione stessa è un contenitore a 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 controllare i layout a griglia in Chrome DevTools.

Flexbox

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

In questo esempio, l'immagine occupa un quarto dello spazio disponibile e il testo occupa gli altri tre quarti. ma 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 controllare i layout Flexbox in Chrome DevTools.

Query container

Flexbox ti consente di progettare a partire dai contenuti. Puoi specificare i parametri degli elementi (quanto devono essere ristretti, quanto devono essere definiti) e lasciare che sia il browser a stabilire l'implementazione finale.

Ma il componente in sé non ha consapevolezza del suo contesto. Non sa se viene utilizzato nei contenuti principali o in una barra laterale. Di conseguenza, i layout dei componenti potrebbero essere più complessi rispetto a quelli di pagina. Per poter applicare stili contestualmente pertinenti, i componenti devono avere un valore maggiore rispetto alle dimensioni dell'area visibile in cui si trovano.

Con i layout di pagina sai la larghezza del contenitore, perché quest'ultimo è l'area visibile del browser; le query supporti registrano le dimensioni del contenitore a livello di pagina.

Per generare report sulle dimensioni di qualsiasi container, utilizza le query del contenitore.

Per iniziare, definisci quali elementi fungono da contenitori.

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

Ciò significa che vuoi poter eseguire query sulla dimensione in linea. Per i documenti in lingua inglese, l'asse orizzontale. Modificherai gli stili in base alla larghezza del contenitore.

Se un componente si trova in uno di questi container, puoi applicare gli stili in modo molto simile alle query supporti.

.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 container di dimensioni inferiori a 25em, gli stili Flexbox non vengono applicati. L'immagine e il testo visualizzati sono ordinati verticalmente.

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

Le query container consentono di definire lo stile dei componenti in modo indipendente. La larghezza dell'area visibile non è più ciò che conta. Puoi scrivere regole basate sulla larghezza dell'elemento contenitore.

Combinazione di query

Puoi utilizzare query supporti per il layout della pagina e query contenitore per i componenti all'interno della pagina.

Qui la struttura generale della pagina è composta da un elemento main e un elemento aside. Sono presenti oggetti multimediali all'interno di entrambi gli elementi.

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

Una query supporti 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 relativa al container per gli oggetti multimediali rimane la stessa: applica un layout Flexbox orizzontale solo se l'elemento contenitore è più largo di 25em.

Le query relative al container sono un punto di svolta per i micro layout. I componenti possono essere autonomi, indipendentemente dall'area visibile del browser.

Verifica le tue conoscenze

Verifica le tue conoscenze dei micro layout.

In precedenza, hai imparato a conoscere i layout delle macro a livello di pagina. Ora conosci i micro layout a livello di componente. Approfondirai gli elementi costitutivi dei tuoi contenuti. Scoprirai come rendere adattabili le immagini. Ora esploriamo la tipografia reattiva.