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

GRID pas à pas

Télécharger les fichiers : Dossier

Nous allons étudier les fichiers.

Premier pas

ouvrir le fichier V1

Mise en place d'une grille

fichier V2, on definit une grille de 4 colonnes et 10 lignes !

Media 

fichier v3, on prend en compte la taille de l'écran.

Version finale

fichier V4

SVG ?

voici un code svg qui peut intégrer une page HTML

<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

   <path d="M20.016 8.016v-4.031h-4.031v4.031h4.031zM20.016 14.016v-4.031h-4.031v4.031h4.031zM20.016 20.016v-4.031h-4.031v4.031h4.031zM14.016 8.016v-4.031h-4.031v4.031h4.031zM14.016 14.016v-4.031h-4.031v4.031h4.031zM14.016 20.016v-4.031h-4.031v4.031h4.031zM8.016 8.016v-4.031h-4.031v4.031h4.031zM8.016 14.016v-4.031h-4.031v4.031h4.031zM8.016 20.016v-4.031h-4.031v4.031h4.031zM20.016 2.016c1.078 0 1.969 0.891 1.969 1.969v16.031c0 1.078-0.891 1.969-1.969 1.969h-16.031c-1.078 0-1.969-0.891-1.969-1.969v-16.031c0-1.078 0.891-1.969 1.969-1.969h16.031z"></path>

  </svg>

Ce code est généralement généré à partir d'un dessin !

Résultat : icone

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"