Placements

 

Objectifs

 https://dupontdenis.github.io/grid-exemple/

Inspection 

 

Vidéos

Les placement de base https://sites.google.com/view/dupontrvisionsl2/grid

Passons aux algorithmes https://sites.google.com/view/dupontgrid/algorithmes?authuser=0

Lectures

https://dupontcss.blogspot.com/2017/03/ordre-des-blocs-places-automatiquement.html

 https://dupontcss.blogspot.com/2018/09/grid-dense.html

:has

 

🥷 Avancé CSS :has

 Découvrez du CSS avancé : 🪛 en action

CSS :has() le sélecteur de parent

.gallery {

  grid-template-columns: repeat(2, 1fr);

&:has(img:nth-child(10)) {

    grid-template-columns: repeat(4, 1fr);

}

  &:has(img:nth-child(30)) {

    grid-template-columns: repeat(10, 1fr);

  }

}

Quadriller l'espace

🚀Dans le simulateur Grid-simu

Ajouter : 

.conteneur:after { content: ""; position: absolute; z-index : 1; top: 0px; right: 0; bottom: 0; left: 0; background: linear-gradient(0deg, rgba(0,0,0,.05) 1px, transparent 2px), linear-gradient(0deg, rgba(0,0,0,.1) 1px, transparent 2px), linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 100px 100px, 100px 100px; } .conteneur { position: relative; background-color: white ! important; }

Autre exemple

🚀voir https://dupontl1.blogspot.com/2025/02/damiercss.html

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

Projet grid

See the Pen fetch img cat by dupont (@dupontcodepen) on CodePen.

Help : 

CSS : 10 premieres minutes ! 

Projet grid : Help

See the Pen Grid langage by dupont (@dupontcodepen) on CodePen.

Projet grid/calandar

 

See the Pen Calendrier template 0-1 by dupont (@dupontcodepen) on CodePen.

Projet grid

Soyez attentif au classe :  <li class="highlight-box"><img src="http:...04.jpg" /></li>

 

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.

Autre exemple de grille dense !

See the Pen Grid auto-flow dense by dupont (@dupontcodepen) on CodePen.

Articles sur grid

 Voici une liste d'articles triés par :

Date :

 https://dupontcss.blogspot.com/search?q=grid&max-results=20&by-date=true

Pertinence : 

https://dupontcss.blogspot.com/search?q=grid

Grid : center with place-items versus place-content

Grid : intro et algo

https://sites.google.com/view/dupontrvisionsl2/grid?authuser=0

https://sites.google.com/view/dupontgrid/algorithmes?authuser=0

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

1. Comprendre les algorithmes de placement
2. Comprendre les algorithmes de placement (dense)

C) En action

1. Création d'une page WEB
2. Création d'un page d'une bibliothèque de photos

D) Avancé

1. Multi support
2. Création d'un design avancé

span en action

See the Pen Grid auto-flow dense by dupont (@dupontcodepen) on CodePen.

TD : grid

 Définir des zones ! (-> TD°

grid : Projets

Projet 1

Nous allons créer une grille digne des plus grands journaux nationaux ! 

cliquez

Projet 1

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é !

-> Projet 3

Mettre des conditions

1.  @supports (display: grid) {
2.   .wrapper > * {
3.     width: auto;
4.     margin: 100px;
5.   }
6. }

Si le navigateur prend en charge display grid alors ...

tuto : grid;

https://learn.freecodecamp.org/responsive-web-design/css-grid/create-your-first-css-grid

Grid et les outils

télécharger les fichiers test.
CSS
HTML


L'outil permet de visualiser la grille complète :

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.

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