I am currently utilizing CSS Grids and I have a specific requirement. I need to offset an element so that it moves horizontally across the grid columns while maintaining its width. Additionally, I want the offset value to be added to the element's existing width.
For instance:
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.item {
grid-column: span 1;
background-color: orange;
border: black solid 1px;
height: auto;
padding: 20px;
text-align: center;
}
.offset {
margin-left: 100px;
}<div class="container">
<div class="item offset">1/4</div>
<div class="item">1/4</div>
<div class="item">1/4</div>
</div>The issue I am facing is that I want the three grid items to seamlessly shift to the right while keeping their widths based on grid-column: span 3;
I am looking for a solution that allows for flexibility without the need to adjust other columns. For example, if I were to offset the second column, I would expect the last column to adjust automatically.
How can I accomplish this?