Alignement bottom dans une GRID
Bonjour à tous,
je suis pas loin de ce que je veux faire sur ma grille
mais j'aimerais que le texte de la cellule 5 soit aligné en bas et non en haut ? mais rien n'y fait je dois rater un truc.
voir le resultat
https://photos.app.goo.gl/RE8fYuDGHo7jKPBMA
HTML
Code:
1 2 3 4 5 6 7
| <div class="wrapper">
<div class="one">Un</div>
<div class="two">Deux</div>
<div class="three">Trois</div>
<div class="four">Quatre</div>
<div class="five">Cinq</div>
</div> |
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 40 41 42 43 44
|
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
border: 1px solid red;
}
.one {
grid-column: 1 / 3;
grid-row: 1;
border: 1px solid red;
text-align: center;
padding: 5px;
}
.two {
grid-column: 1 / 1;
grid-row: 2;
border: 1px solid violet;
padding: 5px;
}
.three {
grid-column: 2/2;
grid-row: 2;
border: 1px solid blue;
padding: 5px;
text-align: right;
}
.four {
grid-column: 1/3;
grid-row: 3;
border: 1px solid green;
padding: 5px;
}
.five {
grid-column: 1/3;
grid-row: 4;
border: 1px solid yellow;
padding: 5px;
vertical-align: bottom;
text-align: center;
height: 100px;
line-height: 16px;
} |