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.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Testare l'invio dei messaggi con Event Hubs Data Explorer
Gestire progetti .NET + React in .NET Aspire
Configurare lo startup di applicazioni server e client con .NET Aspire
Gestione CSS in Blazor con .NET 9
Popolare una classe a partire dal testo, con Semantic Kernel e ASP.NET Core Web API
La gestione della riconnessione al server di Blazor in .NET 9
Generare velocemente pagine CRUD in Blazor con QuickGrid
Creare una libreria CSS universale: Cards
Autenticazione di git tramite Microsoft Entra ID in Azure DevOps
Gestire codice JavaScript con code splitting e lazy loading
Configurare e gestire sidecar container in Azure App Service
Utilizzare il metodo IntersectBy per eseguire l'intersection di due liste