Durante la costruzione di un sito è importante tenere le giuste spaziature, dando la giusta altezza all'header, così come al footer.
Accade poi, frequentemente, che venga richiesta qualche modifica, ed é proprio in quel momento che le dimensioni degli elementi, che fino a prima erano perfette, rendono il layout, e il nostro lavoro, parzialmente o addirittura completamente da rifare.
Ovviamente, non abbiamo il potere di prevedere le richieste che ci verranno fatte in corso d'opera, ma possiamo prevenire spiacevoli inconvenienti strutturando il layout in modo tale che si adegui ad esse.
Per dividere la pagina in Header/Body/Footer, possiamo utilizzare la proprietá CSS grid-template-rows:
<style> .parent { display: grid; /* La riga centrale occuperà tutto lo spazio disponibile */ grid-template-rows: auto 1fr auto; width: 100%; height: 100%; } </style> <div class="parent"> <header>Header</header> <main> Contenuto </main> <footer>Footer </footer> </div>
Allo stesso modo, possiamo suddividere la pagina in colonne grazie a grid-template-columns:
<style> .parent { display: grid; /* La prima colonna sarà minimo 150px E massimo 25% */ grid-template-columns: minmax(150px, 25%) 1fr; width: 100%; height: 100%; } </style> <div class="parent"> <div>sidebar</div> <main> contenuto </main> </div>
Possiamo creare un un layout completo con header footer e sidebar impostando solo le spaziature.
<style> .parent { display: grid; /* Suddivisione righe/colonne */ grid-template: auto 1fr auto / auto 1fr auto; width: 100%; height: 100%; } header { /* Spazio occupato colonna iniziale / colonna finale occupa tutta una riga */ grid-column: 1 / 4; } .left-sidebar { /* Occupa solo la prima colonna */ grid-column: 1 / 2; } main { grid-column: 2 / 3; } .right-sidebar { grid-column: 3 / 4; } footer { grid-column: 1 / 4; } </style> <div class="parent"> <header>HEADER</header> <div class="left-sidebar" >SIDEBAR</div> <main >CONTENUTO</main> <div class="right-sidebar">SIDEBAR</div> <footer>FOOTER</footer> </div>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Modernizzare le applicazioni WPF e Windows Forms con Blazor
Introduzione al nuovo tipo TimeOnly di .NET
Scrivere CSS Media Query utilizzando una range syntax
Utilizzare la keyword with in JavaScript
Usare gateway dedicati con Azure Cosmos DB per migliorare le prestazioni
Definire una tabella come memory optimized su Sql Server tramite EF Core
Condividere i workflow tra più repository in GitHub
Gestire dati sensibili nella configurazione in ASP.NET Core
Tracciare gli eventi tramite i DevTools di Chrome
ChatOps con GitHub
Esecuzione a matrici nei workflow di GitHub Action
Eliminare spazio inutilizzato in un Azure Container Registry
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Migliorare la scalabilità di ASP.NET Core 7 grazie all'output cache
- .NET Conference Italia 2022 - Milano e Online
- Ottenere il riferimento alla finestra che ha aperto un'altra finestra con HTML5 e JavaScript