Demo here: https://stackblitz.com/edit/react-gqfvpy?file=style.scss
I have created a grid aimed to allow an horizontal sliding. I have spoted that when I slide, the grid appears with some offset compared to the first grid. Why when I make my grid slides using the "go {direction}"'s button, the second grid's photos appears with some offset compared to the first grid?
I expect that they appear with exactly same positioning.
How is this possible, since I have expicitly set:
display:grid;
grid-auto-flow: column;
grid-auto-columns:calc(50% - #{$column-gap/2});
grid-template-rows:100%;
in my .grid-container
?
react snippet:
return (
<div>
<GridSlider slideView={slideView}/>
<div className="button-container">
{
buttonToDisplay==="left" &&
<button
className="slide-view__button"
onClick={this.slideView}
>
go right
</button>
}
{
buttonToDisplay==="right" &&
<button
className="slide-view__button"
onClick={this.slideView}
>
go left
</button>
}
</div>
</div>
);
}
}
const GridSlider=({slideView})=>(
<div className="grid-container">
<div className={`grid ${slideView}`}>
<div className="grid-item">
<img src="https://images.unsplash.com/photo-1509909756405-be0199881695?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" />
</div>
<div className="grid-item">
<img src="https://images.unsplash.com/photo-1509909756405-be0199881695?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"/>
</div>
<div className="grid-item">
<img src="https://images.unsplash.com/photo-1509909756405-be0199881695?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" />
</div>
<div className="grid-item">
<img src="https://images.unsplash.com/photo-1509909756405-be0199881695?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" />
</div>
<div className="grid-item">
<img src="https://images.unsplash.com/photo-1509909756405-be0199881695?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"/>
</div>
{...}
SCSS' snippet:
.grid-container{
height:$grid-container-height;
width:$grid-width;
max-width: $grid-width;
//margin:auto;
overflow:hidden;
display:grid;
grid-auto-flow: column;
grid-auto-columns:calc(50% - #{$column-gap/2});
grid-template-rows:100%;
grid-column-gap: $column-gap;
background: yellowgreen;
}
.grid-container > div{
height:100%;
width:100%;
grid-area: span 1/ span 2;
}
.grid{
height:100%;
width:100%;
display:grid;
grid-template-rows:repeat(2,1fr);
grid-template-columns:repeat(4,1fr);
grid-gap:10px 7px;
}
.grid div{
width:100%;
height:100%;
min-width:0;
min-height:0;
// background:green;
border-radius:$border-radius;
}
.grid img{
width:100%;
height:100%;
// background:red;
border-radius:$border-radius;
object-fit: cover;
}
I have created a grid aimed to allow an horizontal sliding. I have spoted that when I slide, the grid appears with some offset compared to the first grid
To me the code works, when i click on the button both grids moves ever so slightly increasing the offset from-1
to-1.5
makes it more visible. However to you there seems to be a problem with this, Which you have failed to explain.