I'm currently working on a 4-column layout using CSS grid. As the browser width reaches a specific breakpoint, I want the first column to be fixed on the left side of the browser (X-axis) while the other columns scroll under it. Right now, I am utilizing min-content to determine the maximum width of the first column.
An example of this behavior can be seen in Amazon's mobile compare feature. Simply scroll down this page to the section labeled "Compare Blink Cameras". You will notice that the first column remains locked and the rest of the products scroll underneath as you swipe left.
The simplified structure of my code is as follows:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 5px;
grid-row-gap: 0px;
}
.item1 { grid-area: 1 / 1 / 2 / 2; background:yellowgreen;}
.item2 { grid-area: 1 / 2 / 2 / 3; background:#ddd }
.item3 { grid-area: 1 / 3 / 2 / 4; background:#ddd}
.item1,.item2,.item3 {padding: 1rem;}<p>THIS IS THE DESCRIPTION OF THE PRODUCT FEATURE IN EACH COLUMN</p>
<div class="container">
<div class="item1">FEATURE 1 : TO BE STICKY</div>
<div class="item2">FEATURE 2 : Scrolls under #1</div>
<div class="item3">FEATURE 3 : Scrolls under #1</div>
</div>How can I achieve the effect where the first column stays fixed while the others scroll under it?