1. Acceuil
  2. Cours
  3. Cours CSS
  4. Les Grid CSS

Les grid CSS

les "grid" KESAKO

Les "grid" sont des grilles. Vous allez me dire bien vue captain Obsvious !. Et je vous répondrez Merci mais laissez moi finir

Un site est constitué de blocks on peut les positionner de manière relative

div{ position:realtive; }

Dans ce cas les block seront positionnés en fonction des blocks adjacents

On peut les positionné de manière absolue

div{ position:absolute; }

Dans ce cas les block seront positionnés indépendament des blocks adjacents. Et sachant cela on peut faire ce genre de mise en page :

Header<header></header>
Main Content <div class="main"></div>
Footer <footer></footer>

réaliser ça en HTML/CSS cela semble facile. On va corser

Header<header></header>
Left <div class="left"></div>
Right <div class="right"></div>
Footer <footer></footer>

Là encore c'est un peu plus dur mais c'est faisable. Allez une dernière

Header
Navigation
Main
Footer

Donc là en HTML/CSS simple ça va être plus compliqué. C'est là que l'on va utiliser les grids

Utilisation

Pour commencer voilà la page HTML dont on va se servir

  • <div class="container">
    • <header></header>
    • <div class="navbar"></div>
    • <div class="main"></div>
    • <footer></footer>
  • </div>

Avant tout on devra parler d'affichage en grille et pas de grille a proprement parlé. Donc pour créer une grille simplement et efficacement il faut indiquer que le bloc .container s'affiche comme une grille

  • .container{
    • width:75vw;
    • height:450px;
    • display:grid;
    }

A présent le container devient une grille. On va lui donner un modèle dans lequel vont s'insérer nos éléments. Pour ce faire on va utilser la propriété grid-template-areas

  • .container{
    • width:75vw;
    • height:450px;
    • display:grid;
    • grid-template-areas:'header header'
      • 'nav main'
      • 'nav foot';
    }

A présent notre élément .container est devenue une grille avec comme model 3 ligne une réservée à l'entête, une pour la barre de navigation et le contenu et une ligne toujours pour la navigation et le footer

Maintenant, il faut s'assurer que chaque élément s'insert sur notre grille. Pour ce faire on va se servir de la propriété css grid-area quand on va définir nos élément

  • .container{
    • width:75vw;
    • height:450px;
    • display:grid;
    • grid-template-areas:'header header'
      • 'nav main'
      • 'nav foot';
    }
  • header{
    • grid-area:header;
    • background:#AAAAEA;
    }
  • .navbar{
    • grid-area:nav;
    • background:#AAEAAA;
    }
  • .main{
    • grid-area:main;
    • background:#EAEAEA;
    }
  • footer{
    • grid-area:foot;
    • background:#EAAAAA;
    }

Et voila en quelque ligne de CSS votre page CSS est faite

Les grid et les attributs

Il est possible de gérer le système de grid directement avec des attributs HTML

  • <div class="container">
    • <header data-grid="header"></header>
    • <div class="navbar" data-grid="navbar"></div>
    • <div class="main" data-grid="main"></div>
    • <footer> data-grid="footer"</footer>
  • </div>
  • .container{
    • width:75vw;
    • height:450px;
    • display:grid;
    • grid-template-areas:'header header'
      • 'nav main'
      • 'nav foot';
    }
  • [data-grid]{
    • grid-area:attr(data-grid);
    }
Partager