Imagine having around 250 divs with the class slider-item styled in a certain way. You have a responsive grid in CSS called A which arranges these divs as columns/items when the window resizes, with a minimum item width of 240px. Check out how it looks below:
The challenge is to keep the grid responsive in a single row (with no wrapping and horizontal overflow). The issue arises from the property
grid-template-columns: repeat(auto-fill..)A
.slider-content {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
overflow: hidden;
margin: 20px 0;
scroll-behavior: smooth;
}
/* .slider-content > .slider-item {
min-height: 130px;
min-width: 240px;
} */
B
.slider-content {
display:grid;
grid-auto-flow:column;
grid-gap:10px;
margin:20px 0;
overflow:auto;
}
.slider-content > .slider-item {
min-height: 130px;
min-width: 240px;
}
CSS B manages to keep the content in a single row with a horizontal scrollbar, but lacks responsiveness compared to CSS A.
This layout will later be used for a multi-column carousel.
I am sticking to using CSS Grid and not interested in flexbox or slickjs for this project.