grid (grid-auto-rows) "hauteur d'élément implicite"

**ouelado** · 13/08/2021, 00h34

Bonjour les amis,

J'apprend un peu à coder sur mon temps libre et me voilà un peu coincé car une propriété CSS ne fait pas ce que j'attends qu'elle fasse.

Voilà mon code html :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="container">
  <nav>nav</nav>
  <section>section</section>
  <article>article</article>
  <aside>aside</aside>
  <p class="salutation"> Bonjour </p>
</div>

et voilà mon code CSS:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.container {
  display: grid;
  grid-template: 100px 300px / 200px 300px  400px;
  grid-auto-columns: 300px;
  grid-auto-rows: 100px;
}
 
/* Explicit placement */
nav {
  grid-row: 1;
  grid-column: 1;
  background: dodgerblue;
}
section {
  grid-row: 1;
  grid-column: 2;
  background: hotpink;
}
article {
  grid-row: 1;
  grid-column: 3;
  background: olivedrab;
}
aside {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 4;
  background: orange;
 
}
 
.salutation
{
  grid-column-start: 4;
  background-color: red;
  padding: 10px;
 
}

Je veux donner à mon élément "Bonjour" (qui est implicite) la même hauteur que la cellule à sa gauche (à savoir : 100px, pour que l'alignement soit homogène).
Seulement, je ne sais pour quelle raison, mon élément "Bonjour" ne prend pas la hauteur souhaité et je ne sais pas pourquoi.
J'ai beau essayé et réessayé, mais rien à faire.

Par contre, concernant la largeur de mon élément, la ligne de code : grid-auto-columns: 300px; fonctionne parfaitement.

Je remercie d'avance toute personne voulant bien m'aider.

Merci.

**darkstar123456** · 13/08/2021, 08h48

Bonjour,

Pour la hauteur, ce n'est pas super compliqué, il suffit de mettre height: 100%; pour le bloc ;-)

Cependant, il ne faut pas oublier que les navigateurs viennent avec une CSS par défaut et pour supprimer "l'escalier"; il faudrait mettre margin: 0; sur le bloc

Et surtout, pour éviter de s'arracher les cheveux avec les paddings, margins et border; je conseille de mettre :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
* {
    box-sizing: border-box;
}

C'est un petit bout de code qui demande au navigateur de calculer lui-même les dimensions à appliquer pour que les paddings et les borders soient considérés comme "à l'intérieur du bloc".
De cette façon, si on reprend votre code, si vous mettez padding: 10px;, cela veut dire qu'en réalité la largeur ou la hauteur du bloc est : 100% - (10px * 2) c'est pas très fun à écrire ^^
Avec la modification du box-sizing; il suffit d'écrire height: 100%;.

Résultat : http://tests.pierre-roels.com/css-grid.php

**ouelado** · 15/08/2021, 01h12

Bonjour,

Tout d'abord, un grand merci pour ta réponse @darkstar123456.

en rajoutant le code que tu m'a fournis, le le résultat est exactement celui que j'attendais.

Seulement, je reste un peu perplexe. En effet, je ne comprend pas pourquoi il faut spécifier height:100%; !? En indiquant au début grid-auto-rows: 100px;, la hauteur ne devrait pas normalement faire 100px ? Parce qu'il a bien suffit que j'indique simplement grid-auto-columns: 300px; pour que la longueur fasse 300px !!!

Concernant margin: 0%;, faut-il que j'indique tout le temps ce code dans mes prochains codes ? Car jusqu'ici je n'ai jamais eu besoin de préciser la valeur de margin si je voulais qu'il n'y ait pas d'espacement !

Je tiens à préciser que je suis débutant. Merci d'avance pour vos réponses

**darkstar123456** · 16/08/2021, 14h10

Hello !

Concernant le margin: 0, il s'agissait du margin par défaut appliqué sur <body> par le navigateur
Donc si tu veux garder ce margin, tu n'auras pas besoin d'ajouter ce code, sinon oui ^^

Les heights en CSS ne font jamais 100% par défaut (à l'exception des colonnes dans flexbox si il n'y a PAS d'alignement vertical)
Il faut toujours les mentionner spécifiquement. A l'inverse des width qui sont toujours en auto pour les éléments inline-block et en 100% pour les éléments de type block.

A noter également que le height: 100%; ne fonctionne que si la hauteur de l'élément est définie (ici par les tailles de notre grille)

Après, je suis clairement pas spécialiste du display: grid;, je trouve ce genre de display hyper figé et d'une écriture illisible
Je ne l'utilise que dans des mises en page répétitives et où les lignes rognent en haut et/ou en bas

**ouelado** · 16/08/2021, 21h49

waaw, merci pour ton explication @darkstar123456

Une dernière question.

Tu indique qu'il faut mentionner la hauteur de 100% dans l'élément "p", Seulement, même quand je ne le mentionne pas, le résultat final me paraît correcte !
Et si il faut le mentionner, il faut l'indiquer seulement sur l'élément "p" ? Pas dans les élément "div" ?

À moins qu'en flexbox (en alignement horizontal) et en grid Layout, la valeur par défaut de height est celle de l'item parent ?

**darkstar123456** · 17/08/2021, 08h20

Hello,

Oui c'est bizarre. J'ai constaté exactement la même chose. Au tout début, mon code ne fonctionnait pas et j'ai donc ajouté ce height: 100% (ayant l'habitude de devoir l'écrire pour que ça fonctionne) mais en retestant mon code à la lecture de ta réponse du 15, je me suis fait la même réflexion

**ouelado** · 17/08/2021, 19h32

En tout cas, mon problème est résolu. Encore un tout grand merci pour ton aide.
Je mets le sujet en résolut.

grid (grid-auto-rows) "hauteur d'élément implicite"

Grille CSS (CSS Grid)

Discussions similaires

Partager

Partager