I am facing an issue with aligning an item in a specific column while maintaining a fixed width. When I attempt to right-align the item, it overflows the designated space. Removing the width attribute resolves the problem, but that is not a viable solution for me.
Although using grid-column helps to set the width, I prefer to have more precise control over the size of the item if possible.
Another approach I tried was setting the container to span grids 1/4 and aligning content inside it, but it seems I made a mistake as it did not work as intended.
* {
margin: 0;
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: repeat(16, minmax(0, 1fr));
grid-gap: 1rem;
align-content: start;
height: 100vh;
width: 100%;
padding: 1rem;
background-color: firebrick;
}
.section {
display: flex;
justify-content: center;
align-items: center;
height: 8rem;
background-color: white;
}
.section-1 {
grid-column: 1/4;
}
.section-2 {
grid-column: 1/4;
}
.section-3 {
grid-column: 4/6;
grid-row-start: 1;
}
.controls {
width: 9rem;
height: 3rem;
grid-column-end: 4;
background-color: white;
}<div class="container">
<div class="section section-1">Section 1</div>
<div class="controls">
<div class="control-btn"></div>
<div class="control-btn"></div>
<div class="control-btn"></div>
</div>
<div class="section section-2">Section 2</div>
<div class="section section-3">Section 3</div>
</div>