TfeServer

Blog de tfe, Web, Unix et Scripts...?

CSS Grids!

Publié le 07/02/2018 dans Web

Voila, j'ai enfin décidé de m'y mettre. Le site utilise désormais les CSS Grids.

Bon oui, l'utilisation ici très simple: un header, menu / contenu, et footer, mais pour une premiere utilisation ça suffi.

Le code a mettre en place? Vraiment simple j'ai trouvé, et intuitif. En plus avec les outils de Firefox, ça aide enormement.

.page
{
    display:grid;
    grid-template-columns:280px 1fr;
    grid-template-rows:100px 1fr 30px;
    grid-template-areas: "title title"
                         "menu content"
                         "footer footer";
}
header
{
    grid-area:title;
}
.main_section
{
    grid-area:content;
}
.footer
{
    grid-area:footer;
}
nav
{
    grid-area:menu;
}

Et pour le responsive mobile?

@media all and (max-width:800px)
{
    .page
    {
        display:grid;
        grid-template-columns:1fr;
        grid-template-rows:1fr;
        grid-template-areas: "title"
                             "menu"
                             "content"
                             "footer";
    }
}