Align a button at the bottom of a grid - html

Question

I am trying to assign the button : called 'go to form' right at the bottom of the grid i have done in CSS.
I have messed around with the relative position but this seems not to want to work. Any ideas guys ?
.item {
border: 1px rgb(160,160,255) solid;
}
img {
border-radius: 2px;
border: 1px solid #ddd;
height : 100px;
width : 80%;
}
p {
font-size: 18px;
}
h1 {
font-size: 14px;
}
</style>
<div class="grid-container">
<div class="item">
<img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/>​
<p> Sheep Dipper </p>
</div>
<div class="item">​<img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/>​​
<p> Laptop Request​ </p>
<h4> Use this form to request a new laptop</h4>
<button>Go to Form</button> </div>
<div class="item">​
<img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/>​
<p> New User Request </p>
</div>
<div class="item">
<img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/>​ ​​
<p> Permissions Management </p>
</div>
<div class="item">​​​
<img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/>​ ​<br/>​<br/>​<br/>​​<br/>​<br/></div>
</div>

Answer 1

try this one :
.grid-container{
position: relative;
}
.youBtnClass {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

Answer 2

Try this. Position absolute will place the button with respect to its immediate parent, and bottom attribute makes sure it starts at the very bottom of the parent.
You may add top margin in case your button lacks a gap on top of it.
.grid-container{
position: relative;
}
.youBtnClass {
position: absolute;
bottom: 0;
margin: 0 auto;
}