Nello script #312 abbiamo analizzato come utilizzare il CSS Grid Model per gestire il layout di una pagina. In questo script entriamo più nel dettaglio analizzando come poter gestire le dimensioni di un div nel quale inseriremo del contenuto.

Una proprietà conoscita ai più, ma al tempo stesso difficile da inserire in un layout "classico", a causa della variabilità della dimensione della viewport del browser, è aspect-ratio. Questa Permette di mantenere la dimensione di un div sulla base di un rapporto altezza / larghezza.

.div-16-9 {
  aspect-ratio: 16 / 9;
}

/* quadrato */
.div-1-1 {
  aspect-ratio: 1 / 1;
}

Se la nostra necessità à invece impostare la dimensione di un div, sulla base del testo, possiamo utilizzare la funzione clamp i cui parametri sono dimensione minima, dimensione voluta, dimensione massima

.div-text {
  width: clamp(30ch, 50%, 80ch);
}

E' da notare che non abbiamo impostato una dimensione in px, em o rem, bensì in ch: caratteri. Il div cercherà di occupare il 50% dello spazio disponibile e, al tempo stesso, la larghezza sará tale da mostrare un minimo di 30 fino a un massimo di 80 caratteri per riga.