See the Pen fetch img cat by dupont (@dupontcodepen) on CodePen.
Affichage des articles dont le libellé est Grid. Afficher tous les articles
Affichage des articles dont le libellé est Grid. Afficher tous les articles
Projet grid
Soyez attentif au classe : <li class="highlight-box"><img src="http:...04.jpg" /></li>
Autre exemple de grille dense !
Modifier la taille de la fênetre et remarquez l'adaptation de l'ordre des images pour remplir la grille grace à la régle grid-auto-flow: dense;
See the Pen Image Gallery — grid (8/9) by dupont (@dupontcodepen) on CodePen.
See the Pen Grid auto-flow dense by dupont (@dupontcodepen) on CodePen.
Grid: bilan
Voici une série d'exercices sur CSS grid.
A) Création d'une page
Utilisation de →Template-areas
B) Les alogorithmes de placement
C) En action
grid : Projets
Projet 1
Nous allons créer une grille digne des plus grands journaux nationaux !
 |
| cliquez |
Projet 2
Il existe depuis la nuit des temps une jolie balise pour créer des zones ( -> map )
<map>
Les zones
Comment définir les agglomérations, les villes et les zones ?
On parle de zones
- rurales
- urbaines
- commerciales
- franches
- administratives
- C19 rouge, vert, bleue
- ...
Grid permet de définir des zones. Ce ne sera pas une populations, des industries ou encore des administration, mais du HTML qui sera implanté dans les zones définies !
Rappels
Projet 2
Projet 3
Nous allons finir par créer une page au look personnalisé !
Images de Vacances
Une photo
Grille de photos
Grille de photos taille différentes
Utilisation de dense
Grille implicite/explicite
code du simulateur de Grid : télécharger
.conteneur { display : grid; }
Ainsi, à chaque fois d'un bloc est placé sur une ligne implicite, la ligne prendra cette valeur.
Création d'une grille :
.conteneur { display : grid; }
Création d'une grille explicite
Nous allons créer ici une grille d'une colonne en explicitant (en donnant) la taille de la colonne.
.conteneur {
display : grid;
grid-template-columns : 200px;
}
Nous voyons ici deux notions importantes :
Le premier bloc se place sur la première colonne. (grille explicite).
Mais, les trois autres blocs se placent eux aussi sur la première colonne sur des lignes non explicites (pas définies) dites implicites.
Remarque : La hauteur des lignes varies en fonction de la hauteur du conteneur et de chaque bloc.
la notion de grille explicite et implicite.
Le premier bloc se place sur la première colonne. (grille explicite).
Mais, les trois autres blocs se placent eux aussi sur la première colonne sur des lignes non explicites (pas définies) dites implicites.
Remarque : La hauteur des lignes varies en fonction de la hauteur du conteneur et de chaque bloc.
Création d'une grille implicite
Continuons à définir notre grille explicite en ajoutant deux lignes.
.conteneur {
display : grid;
grid-template-columns : 200px;
grid-template-rows : 1fr 200px;
}
Encore une fois, la grille explicite (définie 1col,2lig) permet de placer les deux blocs 1 et 2. Et, une grille implicite place les deux blocs 3 et 4.
La hauteur des lignes implicites est réduite dans notre exemple au minimum du fait principalement de la taille 1fr de la première ligne.
La hauteur des lignes implicites est réduite dans notre exemple au minimum du fait principalement de la taille 1fr de la première ligne.
Remarque :
La définition grid-template-rows : 50px 50px; donnerait des hauteurs de lignes explicites plus grandes (sans dépasser la hauteur totale du conteneur).
Hauteur des lignes implicites
On peut donner une valeur aux lignes implicites grid-auto-rows : 100px
Ainsi, à chaque fois d'un bloc est placé sur une ligne implicite, la ligne prendra cette valeur.
Grid et la largeur des blocs
Nous allons nous intéresser à la longueur des blocs !
Ouvrir un Jsfiddle et écrire les codes suivants :
<p> ... </p>
<p>2</p>
</section>
border : 1px solid black;
}
p:nth-child(1){
}
p:nth-child(2){
}
La largeur des paragraphes est équivalent à auto.
p:nth-child(1){
width : 80%;
}
p:nth-child(2){
width : 50vw;
}
Observez les largeurs des blocs en redimensionnant la fenêtre.
Reprendre les questions avec le code HTML suivant
<section>
<p>je suis petit</p>
<p>Voici un mot très long : hyperprésidentialisation</p>
</section>
p {
border : 1px solid black;
display : inline-block
}
p:nth-child(1){
width : min-content
}
p:nth-child(2){
width : min-content;
}
Pensez également à redimensionner la fenêtre.
Attention, notre conclusion est fausse ! il ne faut pas penser en terme de taille mais de répartition.
Reprenons les exemples avec le HTML et CSS suivant !
<section>
<p>je suis petit</p>
<p>Voici un mot très long : hyperprésidentialisation</p>
</section>
section{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
p {
border : 1px solid black;
}
p:nth-child(1){
}
p:nth-child(2){
}
Observons la largueur des paragraphes
Ecrire le CSS suivant
section{
display: grid;
grid-template-columns: repeat(2, 50%);
grid-gap: 20px;
}
Le comportement sera le suivant
Bilan :
Si vous utilisez simplement l'unité fr telle qu'elle est spécifiée, elle diffère de l'utilisation d'un pourcentage car elle distribue l'espace disponible.
Pour garantir une même taille et répartir l'ensemble de la place grid-template-columns: repeat(2, minmax(0 ,1fr));
Ouvrir un Jsfiddle et écrire les codes suivants :
Html
<section><p> ... </p>
<p>2</p>
</section>
CSS
p {border : 1px solid black;
}
p:nth-child(1){
}
p:nth-child(2){
}
La largeur des paragraphes est équivalent à auto.
Modifier la longueur des paragraphes
p:nth-child(1){
width : 80%;
}
p:nth-child(2){
width : 50vw;
}
Observez les largeurs des blocs en redimensionnant la fenêtre.
width :
Il existe de nombreuses valeurs disponibles pour définir la largeur d'un bloc.
Min/Max content
Modifier le CSS avec la valeur min-content :
p:nth-child(1){
width : min-content;
}
p:nth-child(2){
width : min-content;
}
Reprendre les questions avec le code HTML suivant
<section>
<p>je suis petit</p>
<p>Voici un mot très long : hyperprésidentialisation</p>
</section>
Cas du inline-block
Mettre le CSS suivant
border : 1px solid black;
display : inline-block
}
p:nth-child(1){
width : min-content
}
p:nth-child(2){
width : min-content;
}
Pensez également à redimensionner la fenêtre.
Cas de la grille
reprendre le code suivant
html
<section>
<p>1</p>
<p>2</p>
</section>
section{
display : grid;
grid-auto-flow : column;
}
css
p {
border : 1px solid black;
}
p:nth-child(1){
}
p:nth-child(2){
}
Grâce à display:grid les paragraphes ont la même taille !
Donner le CSS suivant
section{
display : grid;
grid-template-columns : 1fr 1fr;
}
p {
border : 1px solid black;
}
p:nth-child(1){
}
p:nth-child(2){
}
Grâce à display:grid les paragraphes ont la même taille !
L'unité fr n'est pas une longueur et ne peut pas être utilisée avec calc () de la même manière qu'une unité de pourcentage ou de longueur.
Reprenons les exemples avec le HTML et CSS suivant !
<section>
<p>je suis petit</p>
<p>Voici un mot très long : hyperprésidentialisation</p>
</section>
section{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
p {
border : 1px solid black;
}
p:nth-child(1){
}
p:nth-child(2){
}
Observons la largueur des paragraphes
Ecrire le CSS suivant
section{
display: grid;
grid-template-columns: repeat(2, 50%);
grid-gap: 20px;
}
Le comportement sera le suivant
Bilan :
Si vous utilisez simplement l'unité fr telle qu'elle est spécifiée, elle diffère de l'utilisation d'un pourcentage car elle distribue l'espace disponible.
Pour garantir une même taille et répartir l'ensemble de la place grid-template-columns: repeat(2, minmax(0 ,1fr));
grid
Etudier le code suivant de la grille.
On désire obtenir le résultat suivant
Quelle propriété est à ajouter au code CSS du conteneur. Un indice "retirer les espaces vides"
On désire obtenir le résultat suivant
Quelle propriété est à ajouter au code CSS du conteneur. Un indice "retirer les espaces vides"
Grid en action
Création de grille
Fichier source
Espace de travail
Utiliser l'éditeur Visual studio pour ouvrir le fichier ou ouvrir le fichier html avec Chrome, on prendra soit d'ajouter le dossier de téléchargement (bureau) dans votre espace de travail ( aide ). |
| Modification dans chrome F12->Source->Filesystem |
Mise en place de la grille
Voici la grille à réaliser ( figure obtenue avec l'outil Mozilla(dernière version) ).
L'espace entre les colonnes est simulé par l'ajout de colonnes de petite taille.
Code CSS
On ne se préoccupe pas des lignes : grid-template-rows: auto;Dans le code source, modifier le CSS pour installer une grille de 9 colonnes.
Il faudra ajouter les attributs à display et grid-template-columns
On utilisera le motif repeat pour faciliter la répétition du motif 1fr 12%.
Placements des blocs
Modifier le CSS de chaque item pour obtenir le placement de la figure suivante.La figure donne pour les blocs numérotés leurs positions.
Il faut dans le fichier source compléter le code CSS pour obtenir ces placements.
Exemple
Pour le bloc de classe griditem1, le placement doit /* faire commencer à la colonne 3->7 */ainsi, on ajoutera les propriétés grid-column-start et grid-column-end avec les valeurs 3 et 7 dans la définition de la classe
.griditem1 { /* faire commencer à la colonne 3->7 */ grid-column-start : 3; grid-column-end : 7; margin: 0 auto; padding: 0; width: 100%; text-align: right; }
Gap
Nous avons simulé un espacement entre les colonne 1,3,5,7,9 en ajoutant de petites colonnes de taille 1fr en position 2,4,6,8.Est il possible de simplifier la définition de la grille avec l'ajout de gap ?
Code
Comment mettre en JS des attributs de Grille
let a = document.body.firstElementChild;
a.style.gridColumn = 5;
a.style.gridRow = 5;
En utilisanat cssText :
a.style.cssText = "grid-row:1/5;grid-column:3";
On peut même calculer les valeurs !
div.style.cssText = `grid-row:${Math.floor(i/this.grid.width)+1};grid-column:${col+1}`;
Notez pour certains attributs l'ajout de px :
`margin-left:${Math.floor(8)}px`;
voir ⇛fichier
a.style.gridColumn = 5;
a.style.gridRow = 5;
En utilisanat cssText :
a.style.cssText = "grid-row:1/5;grid-column:3";
On peut même calculer les valeurs !
div.style.cssText = `grid-row:${Math.floor(i/this.grid.width)+1};grid-column:${col+1}`;
Notez pour certains attributs l'ajout de px :
`margin-left:${Math.floor(8)}px`;
voir ⇛fichier
Ordre des blocs placés automatiquement : grid;
Utilisons le simulateur et appliquons le style suivant :
Une fois que les blocs fixes sont placés, les autres éléments sont placés automatiquement dans l'ordre du DOM (défini dans le HTML).
Dans notre exemple :
Les blocs bleu, vert et gris sont placés dans cet ordre.
Remarque : le bloc bleu défini après le bloc rouge se retrouve placé avant lui.
Pour les blocs "fixes", il peut y avoir intersection des zones. Les blocs se recouvrent dans l'ordre de leur position dans le DOM, voir Intersection.
Voici un Autre cas
.conteneur {
display : grid;
grid-template-columns:
repeat(2, 100px);
grid-auto-rows: 100px;
}
|
#it1 {
grid-column: 2;
grid-row: 1;
}
|
Nous allons tenter de comprendre l'algorithme utilisé pour placer les blocs.
Tout d'abord, les blocs "fixes" sont placés. On appelle bloc fixe un bloc qui à son emplacement défini en ligne et en colonne.
Dans notre exemple seul, le bloc rouge est un bloc fixe ; sa colonne et ligne sont définies.
Une fois que les blocs fixes sont placés, les autres éléments sont placés automatiquement dans l'ordre du DOM (défini dans le HTML).
Dans notre exemple :
Les blocs bleu, vert et gris sont placés dans cet ordre.
Remarque : le bloc bleu défini après le bloc rouge se retrouve placé avant lui.
Pour les blocs "fixes", il peut y avoir intersection des zones. Les blocs se recouvrent dans l'ordre de leur position dans le DOM, voir Intersection.
Cas des blocs définis sur la dimension définie par le flow.
Examinons ce cas
#it1 {
grid-row : 2;
grid-column : 2/3;
}
#it2 {
grid-column : span 2;
}
#it3 {
grid-row : 1;
}
Priorité des blocs :
- Le bloc 1 est traité en priorité (bloc fixe).
- Pour grid-auto-flow: row; nous recherchons des blocs qui ont l'attribut grid-row déclaré. Le bloc 3 est traité
- Les blocs restants sont traités par ordre du flux.
autre exemple
Cas des blocs définis uniquement sur une dimension.
Voici un Autre cas
exemple avec grid-column-end
.conteneur {
display : grid;
grid-template-columns:
repeat(2, 100px);
grid-auto-rows: 100px;
grid-gap: 10px;
}
|
#it1 {
grid-column: 2;
grid-row: 1 / 2;
}
#it2 {
grid-column-end: span 2;
}
|
Comme précédemment le bloc rouge est placé en priorité, ensuite le bloc bleu cherche une place où il peut se placer sans "toucher" les blocs fixes. Exemple
Les blocs vert et gris seront placés à la suite avec les mêmes conditions en respectant entre eux les précédences du DOM. Ils ne peuvent "dépasser" le bloc bleu.
Les blocs vert et gris seront placés à la suite avec les mêmes conditions en respectant entre eux les précédences du DOM. Ils ne peuvent "dépasser" le bloc bleu.
Pour remplir les trous vides grid-auto-flow: dense; fait des merveilles
Pour tout s'avoir du placement des blocs dans une grille ! niveau expert
Déterminer le placement des blocs sur la grille.
Les algorithmes utilisés sont très sensibles aux configurations.
Ce n'est pas simple.
Devenez un expert : lisez la suite.
Exemple
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
|
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
grid-gap: 10px;
}
|
div:nth-child(4n+1) {
grid-column-end: span 2;
grid-row-end: span 2;
background-color: blue;
}
div:nth-child(2) {
grid-column: 3;
grid-row: 2 / 4;
}
div:nth-child(5) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
|
Les algorithmes utilisés sont très sensibles aux configurations.
Ce n'est pas simple.
Devenez un expert : lisez la suite.
Exemple
Inscription à :
Articles (Atom)