Horizontal scroll with css grid
Solution 1
Try it with this:
display: grid;
grid-gap: 16px;
padding: 16px;
grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
grid-auto-flow: column;
grid-auto-columns: minmax(160px,1fr);
overflow-x: auto;
grid-auto-flow: column; will force the grid to add your elements as column instead of following the free space.
grid-auto-columns: minmax(160px,1fr); the items added outside the viewport do not match auto-fit, so they won't get the size defined in your template. So you have to define it again with grid-auto-columns.
overflow-x: auto; auto will add the scrollbar
Solution 2
Horizontal scrolling containers the right way! Source
:root {
--gutter: 20px;
}
.app {
padding: var(--gutter) 0;
display: grid;
grid-gap: var(--gutter) 0;
grid-template-columns: var(--gutter) 1fr var(--gutter);
align-content: start;
}
.app > * {
grid-column: 2 / -2;
}
.app > .full {
grid-column: 1 / -1;
}
.hs {
display: grid;
grid-gap: calc(var(--gutter) / 2);
grid-template-columns: 10px repeat(6, calc(50% - var(--gutter) * 2)) 10px;
grid-template-rows: minmax(150px, 1fr);
overflow-x: scroll;
scroll-snap-type: x proximity;
padding-bottom: calc(.75 * var(--gutter));
margin-bottom: calc(-.5 * var(--gutter));
}
.hs:before,
.hs:after {
content: '';
}
/* Hide scrollbar */
.hide-scroll {
overflow-y: hidden;
margin-bottom: calc(-.1 * var(--gutter));
}
/* Demo styles */
html,
body {
height: 100%;
}
body {
display: grid;
place-items: center;
background: #456173;
}
ul {
list-style: none;
padding: 0;
}
h1,
h2,
h3 {
margin: 0;
}
.app {
width: 375px;
height: 667px;
background: #DBD0BC;
overflow-y: scroll;
}
.hs > li,
.item {
scroll-snap-align: center;
padding: calc(var(--gutter) / 2 * 1.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #fff;
border-radius: 8px;
}
<div class="app">
<h1>Some headline</h1>
<div class="full hide-scroll">
<ul class="hs">
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
</ul>
</div>
<div class="container">
<div class="item">
<h3>Block for context</h3>
</div>
</div>
</div>
Solution 3
Your problem is that you are using 1fr unit. Instead put 25% (use calc to accommodate for any gaps). This will size your columns relative to available screen width. Of course you must apply 25% to grid-auto-columns also.
Diego Cardona
Updated on June 07, 2022Comments
-
Diego Cardona almost 2 years
I'm having a problem when I am trying to make a horizontal scroll when the grid complete four columns. See
#series { display: grid; grid-gap: 16px; overflow-x: scroll; padding: 16px; grid-template-columns: repeat(4, 1fr); grid-auto-flow: column; }
Using this I get below output
But, you know, I want to get same like "four columns" and a scroll bar for see more.
What's the problem.
-
Diego Cardona about 5 yearsBro, I´ve tried with
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
but I'm not getting the scroll bar, is same like the others items does not exists -
eddy almost 4 yearsWhen I tried to do this inside a div that is placed in a header with position:sticky the whole page is scrolled
-
Th3S4mur41 over 3 years@eddy not sure this could apply to your problem without more details. But check out the following link for some tips about the combination between position: sticky and grid melanie-richards.com/blog/css-grid-sticky/?ref=heydesigner
-
Alexandre Piva almost 3 yearsI'm sorry, I don't like this approach because need to use JavaScript to set the number of grid items. Just set grid-auto-flow: column; and grid-auto-columns with the same value as grid-template-columns and will work!
-
ISS about 2 yearsTry overflow:scroll!important on parent element.
-
mrchestnut almost 2 yearsThis solution worked for what I was trying to accomplish: A scrollable, single row column.