css
GRID
C'est quoi?
Le module CSS Grid layout (modèle de disposition en grille) permet de créer des mises en page en divisant l'espace d'affichage en blocs utilisables.
Nous allons pouvoir définir avec ce système des relations de taille, position et d'empilement entre les éléments HTML.
CSS Grid layout
FLEX vs GRID
Flex
on travaille sur 1 dimension
Grid
on travaille sur 2 dimensions
Différence d'utilisation: Grid Layout est voué à construire le gabarit général de la page et que Flexbox est le compagnon idéal des composants qui la remplissent.
Grid : le contenant
Flex : le contenu
Concrètement, les 2 font la paire !!
EXEMPLE
<div class="container">
<div class="bloc1">
<h1>mon titre</h1>
<p>Lorem ipsum dolor sit amet.</p>
<img src="profil chien (1).png" alt="photo de chien">
</div>
<div class="bloc2"></div>
<div class="bloc3"></div>
<div class="bloc4"></div>
</div>EXEMPLE
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas: "bloc1 bloc1 bloc2"
"bloc3 bloc4 bloc4" "bloc3 . .";
}
.bloc1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
grid-area: bloc1;
}
.bloc2 {
grid-area: bloc2;
}
.bloc3 {
grid-area: bloc3;
}
.bloc4 {
grid-area: bloc4;
}EXEMPLE
Comment ça marche ?
Mise en place
On crée un "contexte de grille" en appliquant la déclaration display: grid à un élément conteneur qui constituera la structure générale.
Le conteneur deviendra un "grid-container" et ses enfants directs des "grid-items".
Cette structure sera formée de lignes et colonnes définissant des "cellules".
Tous les enfants (directs) de ce conteneur général seront affectés et pourront se placer au sein des "cellules" de la trame.
<div class="container">
<div class="bloc1">bloc1</div>
<div class="bloc2">bloc2</div>
<div class="bloc3">bloc3</div>
<div class="bloc4">bloc4</div>
</div>.container {
display: grid;
}
.bloc1 {
background: lightgreen;
}
.bloc2 {
background: coral;
}
.bloc3 {
background: darkcyan;
}
.bloc4 {
background: darkmagenta;
}
.container {
display: grid;
grid-template-columns: 400px 400px;
grid-template-rows: 250px 250px;
}grid-template-columns : Cette propriété définit les nombres et les fonctions de taille pour les colonnes de la grille.
grid-template-rows : Cette propriété définit les nombres et les fonctions de taille pour les lignes de la grille.
Définir les colonnes et lignes
.container {
display: grid;
grid-template-columns: 400px 50%;
}Plusieurs façons de définir les tailles
Les pourcentages : Avec cette valeur, nous allons pouvoir définir une taille en fonction du format de la page.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}Les fractions : Avec cette valeur, nous allons pouvoir remplir le reste de la page ou la diviser en taille égale.
Plusieurs façons de définir les tailles
//Créer une div container et lui donner une taille de 90vh
//Placer à l'intérieur 6 div
//Donner à chacune une couleur différente
//Placer 3 colonnes et 2 lignes
//La 1ère colonne prend 200px
//La 2ème colonne prend 20% de la largeur
//La 3ème colonne prend la partie restante de la page
//La 1ère ligne prend 80px de la hauteur du conteneur
//La 2ème ligne prend le reste de la hauteur du conteneurExo
Placer les éléments avec
Area
grid-template-areas : Cette propriété nous permet de placer les éléments nommés dans la grille.
grid-area : Cette propriété nous permet de nommer les éléments qui seront ensuite placés dans la grille.
Placer les éléments avec deux propriétés
<div class="container">
<header>header</header>
<article>article</article>
<aside>aside</aside>
<footer>footer</footer>
</div>EXEMPLE
header {
grid-area: header;
}
article {
grid-area: article;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}EXEMPLE
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 80px 1fr 10%;
grid-template-areas:
"header header header"
"article article aside"
". footer footer";
}
EXEMPLE
EXEMPLE
Dans ton drive ;)
Exo
Grid
By Jonathan Blanc
