How can I position an element inside a grid without using relative or absolute positioning

I’m trying 2 name every element inside a grid and I want to position at the bottom without using d usual absolute or relative positioning
If U notice the p.tag is only on one of the element, dats because it worked successfully on only day element n by d tym I tried 2 expand it, that is copy n paste it on each of d a.tag, d result was something else.

HTML

<div class=”con1″>
<a href=”” class=”gr1″>
<img SRC=”onion.jpg” alt=””>
<p class=”det1″>onion</p>
</a>
<a href=”” class=”gr1″>
<img src=”carrot.jpg” alt=””>

</a>
<a href=”” class=”gr1″>
<img src=”grapes.jpg” alt=””>
</a>
<a href=”” class=”gr1″>
<img src=”strawberry.jpg” alt=””>
</a>
<a href=”” class=”gr1″>
<img src=”tomatoes.jpg” alt=””>
</a>
<a href=”” class=”gr1″>
<img src=”pepper.jpg” alt=””>
</a>
<a href=”” class=”gr1″>
<img src=”apples.jpg” alt=””>
</a>
</div>

CSS

.body{
position: fixed;
width: 100%;
height: 85vh;
top: 18%;
border: 2px solid green;
overflow: auto;
}
.gr1{
width: 100%;
height: 100%;
border: 2px solid yellow;
}
.gr1 img{
width: 100%;
height: 100%;
margin: 0 auto;
object-fit: cover;
object-position: center;
}
.con1{
width: 100%;
height: 75%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}