Dall'archivio script > HTML5

Utilizzare il CSS Grid Model per creare il layout di un sito

di Morgan PizziniMorgan Pizzini, in HTML5, CSS,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi