Affichage des articles triés par pertinence pour la requête grid. Trier par date Afficher tous les articles
Affichage des articles triés par pertinence pour la requête grid. Trier par date Afficher tous les articles

Ordre des blocs placés automatiquement : grid;

Utilisons  le simulateur et appliquons le style suivant :

.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 :

  1. Le bloc 1 est traité en priorité (bloc fixe). 
  2. Pour grid-auto-flow: row; nous recherchons des blocs qui ont l'attribut grid-row déclaré. Le bloc 3 est traité
  3. 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.




Pour remplir les trous vides  grid-auto-flow: dense; fait des merveilles


Libellés :

Grid : dense

Des algorithmes puissants au service du placement.


.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-auto-rows: 100px;
    grid-gap: 10px;
    grid-auto-flow: row;
}

.wrapper div:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.wrapper div:nth-child(2) {
    grid-column: 3/5;
    grid-row: 2 / 5;
}

.wrapper div:nth-child(3) {
    grid-row-end: span 2;
}

.wrapper div:nth-child(4) {
    grid-column-end: span 2;
}

Algorithme par l'exemple


Sans détailler les algorithmes, en voici le principe.

1) On place les objets qui ont une position. Sont concernés ceux qui ont une valeur pour grid-column et grid-row.
Dans l'exemple, les blocs 1 et 2 sont concernés.

2) On place les autres objets restant ( ici 3 et 4) en tenant compte de leur taille.
Dans notre exemple, la première *case* qui permet d’accueillir le bloc 3 est à la ligne 3, colonne 1.


Pour le bloc 4, qui doit être placé après le bloc trois (on conserve l'ordre du DOM), la première *case* correspond à la ligne 5, colonne 1.

Algorithme automatique avancé


L'algorithme de placement avec la valeur "dense" permet de combler des *trous* !

.wrapper {

  display: grid;

  grid-template-columns: repeat(4, 100px);

  grid-auto-rows: 100px;

  grid-gap: 10px;
  grid-auto-flow : row dense;

}

 Dans cette exemple, le bloc 4 peut être placé à la ligne 1 colonne 3 (le placement ne respecte plus le flux du DOM).


Remarque : Sur cet exemple simple, on pourrait forcer le placement du bloc 4 (  premier bloc des non fixés)

 .wrapper div:nth-child(4) {
   grid-column-end: span 2;
   order : -1

 }

 Cette idée (définir l'ordre parfait) n'est pas utilisable dans un cas général ( une centaine de photos de taille différentes ).

Grid en action

Nous allons utiliser "grid" pour réaliser un placement de blocs.

Code de départ

Nous écrivons un flux.
<section class="intro">
        <h1>Quai </h1>
        <h2><a href="#">voyager</a></h2>
        <img src="https://www.ibisc.univ-evry.fr/~dupont/52.jpg" alt="test">
        <p>Sous le rideau l'eau de la mer
</p>
</section>

le placement dans la grille de chaque balise permettra de modifier visuellement le flux (ordre des éléments)

Voici le résultat à obtenir après le placement des différents blocs. 



La plus grande difficulté du projet est la création de la grille ; le codage ne devant pas poser de difficulté à un spécialiste CSS.

Voici la grille que l'on peut imaginer comme un calque sur votre projet.

Elle est constituée de 3 colonnes et de quatre lignes.


Examinons quelques exemples de placement

l'image

Le placement de l'image prend toute la largeur et 3 lignes.

Pour donner l'aspect final, il faudra jouer sur d'autres propriétés en particulier la taille doit être mise à 100% (du conteneur)

{    width: 100%;    height: 100%;    object-fit: fill; // ou object-fit: cover;    opacity: 0.6;
}


le bloc  : voyager

Le placement de ce bloc est simple. 

Comme précédemment, il faudra un grand nombre d'ajouts pour obtenir le résultat final désiré.


{
    text-transform: uppercase;
    border: 1px solid black;
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem 0.5rem 0.6rem;
    font-size: 1.2rem;
    margin: 0;
    align-self: self-start; // permet de mettre le bloc en haut de l'emplacement.
}

Le bloc : Quai

L'idée initiale de placer le bloc "quai" au centre, ne permettrait pas à la bordure rouge de prendre toute la longueur.
Le placement du bloc doit donc s'étendre sur toute la second ligne.


L'ajout de propriété sur le body {text-align: center;} et sur  le bloc { border-bottom: 20px solid red }
permettront de donner l'allure finale.

Les étapes du projet

Nous allons tenter de mettre en place une grille correspond aux attentes (du client).

Utilisation du simulateur

Avant de penser aux éléments réels du projet, nous allons penser en termes de blocs de couleur.

L'idée est d'arriver à construire une grille suivante : 


Allez sur http://dupontcss.blogspot.fr/p/test-grill.html

Ecrivez le code suivant

.conteneur {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}


Ajouter les dispositions centrer

.conteneur {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 2em; justify-content: center; align-items: center; text-align: center;
}

#it3 { width : 100%; height : 100%; grid-column: 1 / -1; grid-row: 1 / 4; object-fit: fill; opacity: 0.6; z-index:3; }


 #it1 { text-transform: uppercase; grid-column: 1 / -1; grid-row: 2 / 3; font-size: calc(1rem + 1vw); margin-left: 1rem; margin-right: 1rem; z-index : 2; }

#it2 { text-transform: uppercase; border: 1px solid black; background: rgba(255, 255, 255, 0.6); padding: 1rem 0.5rem 0.6rem; font-size: 1rem; grid-column: 2 / 3; grid-row: 3 / 4; align-self: self-start; z-index : 2; }

#it4 { grid-column: 1 / -1; grid-row: 4 / 5; align-self: center; width: 66%; justify-self: center; font-size: calc(0.75rem + 1vw); line-height: 1.5; margin: 0; }

En action :




See the Pen Example grid by dupont (@dupontcodepen) on CodePen.

Libellés :

Grid : without dense

Reprenez le simulateur : https://dupontcss.blogspot.com/p/test-grill.html

Ecrivez le code suivant :

.conteneur {

        display:grid;
        grid-template-columns: [A] 1fr [B] 1fr [C] 1fr [D] 1fr 1fr;
        grid-auto-rows: 100px;

    }

     #it1 {
grid-column: A
     }

     #it2 {
grid-column: A
     }

     #it3 {
grid-column: C
     }

     #it4 {
grid-column: C
     }


Ajoutez la régle grid-auto-flow: dense au conteneur : 

  .conteneur {
        display:grid;
        grid-template-columns: [A] 1fr [B] 1fr [C] 1fr [D] 1fr 1fr;

        grid-auto-rows: 100px;
        grid-auto-flow: dense;


     }

Autre idée !

Remplacez grid-auto-flow: dense par  grid-auto-flow: column;

Testez la régle grid-auto-flow: column; dans l'exemple suivant : 

See the Pen pays drapeaux by dupont (@dupontcodepen) on CodePen.

Résumé sur le placement :

Le flux est en ligne, un element qui a sa colonne fixée bloque le flux !

notez





Le flux est en colonne, on ne peut passer devant un element qui a sa ligne fixée.




notez








Grid et la largeur des blocs

Nous allons nous intéresser à la longueur des blocs !

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

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.

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 !

Attention, notre conclusion est fausse ! il ne faut pas penser en terme de taille mais de répartition.
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));

Plus d'infos »
Libellés : ,

grid td

Vidéo

Commencez par relire l'article : définir une zone.

Travail
Vous devez réaliser la page du client suivante.


HTML
<div class="grid">
<div class="footer">BAS DE PAGE</div>
 <div class="menu">MENU</div>
<div class="header">ENTETE</div>
<div class="article">MONARTICLE</div>
</div>

Compléter le CSS 

Vous devez remplacer les ... par un ou plusieurs xx.start ou xx.end

 .grid {
    display: grid;
    
    grid-template-columns: [nav-start ...] 150px [nav-end ...] 1fr [header-end ...];

     grid-template-rows: [nav-start ...] 50px [...] 1fr [nav-end ... ] 50px [...];



 }

 .menu {
    grid-area: nav;
}

.header {
    grid-area: header;
}

.article {
    grid-area: content;
}

 .footer {
   grid-area: footer;

}

Autre écriture.


En vous inspirant du cours, créer une grid-template-areas permettant d'obtenir le même résultat que précédemment.

Pour tout s'avoir du placement des blocs dans une grille ! niveau expert

Déterminer le placement des blocs sur la grille.

<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

Plus d'infos »
Libellés :

Grille implicite/explicite

code du simulateur de Grid : télécharger

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 :

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.

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.
Libellés :

Grid en action

Création de grille

Nous allons construire un page avec la dernière des technologies de placement : grid.



Fichier source


Télécharger dans le dossier de votre choix (ici le bureau) le Fichier à Compléter pour obtenir la grille suivante ➤

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) ).


La grille comporte 5 colonnes espacées de 1fr.
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


Libellés :
Inscription à : Articles (Atom)