By using the grid positioning of the buttons to the right. Can anyone point me in the right direction?
.container {
width: 500px;
border: 1px solid red;
}
.grid {
display: grid;
grid-gap: 5px;
grid-auto-flow: column;
width: 100px;
}
<div class="container">
<div class="grid">
<button>test 1</button>
<button>test 2</button>
</div>
</div>
In the above scenario, how do I move the two buttons to the end of the parent div?
The problem is.. you had set the grid width to 100px
Instead set column width:100px
inside the grid, because grid is the container also use justify-content:end;
to align the content to the right side.
.container {
width: 500px;
border: 1px solid red;
}
.grid {
display: grid;
grid-gap: 5px;
grid-auto-flow: column;
width: 100%;
grid-template-columns: 100px 100px;
justify-content: end;
}
button{display:inline-block;}
<div class="container">
<div class="grid">
<button>test 1</button>
<button>test 2</button>
</div>
</div>
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout