Unable to align buttons with CSS flex or grid - html

Question

I'm trying to create a page where I have 2 lists of buttons, each one in a div, side by side. I tried a CSS grid and flex, as you can see below. However, nothing seems to work, as the first div went all the way to the left margin and the other one under it.
How do I add some space to the left margin for the first column and from the half of the page for the second one?
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
button {
width: 120px;
height: 60px;
text-align: center;
text-decoration: none;
display: flex;
flex-direction: column;
font-size: 16px;
font color: black;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
background-color: white;
color: black;
border: 2px solid #CC0000;
}
<div class="grid-container">
<div class="grid-child">
<a href="createCl.php"> <button style="color: #000000; text-decoration: none;">
<strong>Aggiungi</strong></button></a>Aggiungi</span> <br><br>
</div>
<div class="grid-child">
<a href="map.php"> <button style="color: #000000; text-decoration: none;">
<strong>Mappa</strong></button></a>Mappa Clienti</span>
</div>
</div><br>

Answer 1

I'm a big fan of using flex. So if you're not locked in on using grid, here's a solution:
https://codepen.io/oppo_oskar/pen/yLVJQeL
HTML:
<div class="grid-container">
<div class="left buttons">
<button>Left1</button>
<button>Left2</button>
<button>Left3</button>
<button>Left4</button>
</div>
<div class="right buttons">
<button>Right1</button>
<button>Right2</button>
<button>Right3</button>
<button>Right4</button>
</div>
</div>
CSS:
.grid-container
{
display: flex;
flex-direction: row;
}
.buttons {
display:flex;
flex-direction: column;
}
For quick reading on how flex works, you can check out this site:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

All your buttons must be inside a container, for example: <div class="grid-container">.
In CSS, grid-template-columns: ; defines how many columns you will have in your .grid-container.
For every 1fr that you type into grid-template-columns: ; a new column will be created.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
<div class="grid-container">
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
<button>Button4</button>
<button>Button5</button>
<button>Button6</button>
</div>
I hope it helped a bit, please let me know. ^^'