Align text in CSS element grid [duplicate] - html

Question

This question already has answers here:
How to align content of a div to the bottom
(29 answers)
Align text to the bottom of a div
(2 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 3 years ago.
I have made this CSS grid. I am still practising using the CSS grid, so I am trying to imitate this site. I would like to place the text the same place as the template I link to.
But how is the correct way to do this? At the moment the link is in the upper left corner.
Should I make another div inside the first div tag, or what is the best way to do it?
Best regards.
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
}
.wrapper > div {
background-color: #eee;
padding: 1em;
box-sizing: border-box;
}
.wrapper > div:nth-child(odd) {
background-color: #ddd;
}
.item1 {
grid-row: 1 / 3;
grid-column: 1/7;
height: 700px;
}
.item2 {
grid-row: 1 / 1;
grid-column: 7/13;
height: 340px;
}
.item3 {
grid-row: 2 / 3;
grid-column: 7/10;
height: 350px;
}
.item4 {
grid-row:2/3;
grid-column: 10/13;
height: 350px;
}
a {
font-size: 30px;
}
#media only screen and (max-width: 600px) {
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
}
.item1 {
grid-row: 1 / 3;
grid-column: 1/13;
height: 350px;
}
.item2 {
grid-row: 3 / 3;
grid-column: 1/13;
height: 200px;
}
.item3 {
grid-row: 4 / 5;
grid-column: 1 / 7;
height: 200px;
}
.item4 {
grid-row: 4 / 5;
grid-column: 7 / 13;
height: 200px;
}
}
/*
.nested {
display:grid;
grid-template-columns:repeat(3,1fr);
grid-gap:1em;
}
.nested > div {
border:1px solid red;
grid-auto-rows: 70px;
padding:1em;
}
*/
<div class="wrapper">
<div class="item1">
Watch a tiny cat taking a bath
</div>
<div class="item2">
Spain: Take a virtual tour
</div>
<div class="item3">
5 Tips to create your garden
</div>
<div class="item4">
10 Movies you need to see
</div>
</div>

Answer 1

Add this to the item
display: flex;
justify-content: flex-end;
flex-direction: column;
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
}
.wrapper > div {
background-color: #eee;
padding: 1em;
box-sizing: border-box;
}
.wrapper > div:nth-child(odd) {
background-color: #ddd;
}
.item1 {
grid-row: 1 / 3;
grid-column: 1/7;
height: 700px;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.item2 {
grid-row: 1 / 1;
grid-column: 7/13;
height: 340px;
}
.item3 {
grid-row: 2 / 3;
grid-column: 7/10;
height: 350px;
}
.item4 {
grid-row:2/3;
grid-column: 10/13;
height: 350px;
}
a {
font-size: 30px;
}
#media only screen and (max-width: 600px) {
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
}
.item1 {
grid-row: 1 / 3;
grid-column: 1/13;
height: 350px;
}
.item2 {
grid-row: 3 / 3;
grid-column: 1/13;
height: 200px;
}
.item3 {
grid-row: 4 / 5;
grid-column: 1 / 7;
height: 200px;
}
.item4 {
grid-row: 4 / 5;
grid-column: 7 / 13;
height: 200px;
}
}
/*
.nested {
display:grid;
grid-template-columns:repeat(3,1fr);
grid-gap:1em;
}
.nested > div {
border:1px solid red;
grid-auto-rows: 70px;
padding:1em;
}
*/
<div class="wrapper">
<div class="item1">
Watch a tiny cat taking a bath
</div>
<div class="item2">
Spain: Take a virtual tour
</div>
<div class="item3">
5 Tips to create your garden
</div>
<div class="item4">
10 Movies you need to see
</div>
</div>