After creating a simple CSS Grid, I am struggling with placing text inside the tiles at a specific position. The concept is illustrated in this image:
https://i.sstatic.net/13G7j.jpg
I aim to have the text within the blue box.
.tiles {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 2fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
height: 1150px;
cursor: pointer;
}
.box1 {
background: #3030c9;
grid-area: 1 / 1 / 2 / 3;
}<div class="tiles">
<div class="box box1">
<h1 id="text">Test</h1>
</div>
<div class="box box2">Test</div>
<div class="box box3">Test</div>
<div class="box box4">Test</div>
</div>