grid (grid-auto-rows) "hauteur d'élément implicite"
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:
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:
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.
