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
Q# for Quantum Programming, an "only for the brave" session
Caricare un asset come parte di una release con un workflow di GitHub
Effettuare il download di un file via FTP con la libreria FluentFTP di .NET
Condividere i workflow tra più repository in GitHub
Azure Functions e OpenAPI: la coppia perfetta!
3 metodi JavaScript che ogni applicazione web dovrebbe contenere - Parte 2
DateOnly e TimeOnly in .NET: e io che ci faccio?
Usare Azure Application Gateway come reverse proxy per ASP.NET Core
Elencare le container images installate in un cluster di Kubernetes
Evitare la command injection in un workflow di GitHub
Usare Docusaurus per creare un sito di documentazione
Taggare la output cache in base al routing in ASP.NET Core