У меня проблема, когда я пытаюсь сделать горизонтальную прокрутку, когда сетка заполняет четыре столбца. Видеть
#series {
display: grid;
grid-gap: 16px;
overflow-x: scroll;
padding: 16px;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: column;
}
Используя это, я получаю ниже вывод
Но, знаете, я хочу получить такие же, как «четыре столбца» и полосу прокрутки, чтобы увидеть больше.
В чем проблема.
width каждого столбца должен быть динамическим или примерно таким же, как на изображении выше? 16.02.2019 grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));, но все остальные элементы, которые не могут быть на экране, не отображаются 17.02.2019 overflow-x: scroll в родительском элементе сетки, а не в сетке. 17.02.2019 grid-auto-flow: column как в вопросе. 17.02.2019 Попробуйте вот так:
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; заставит сетку добавлять ваши элементы в виде столбцов вместо того, чтобы следовать за свободным пространством.
grid-auto-columns: minmax (160px, 1fr); элементы, добавленные за пределами области просмотра, не соответствуют автоматическому размещению, поэтому они не получат размер, определенный в вашем шаблоне. Поэтому вам нужно снова определить его с помощью grid-auto-columns.
overflow-x: auto; auto добавит полосу прокрутки
Горизонтальная прокрутка контейнеров в правильном направлении! Источник
: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>Ваша проблема в том, что вы используете блок 1fr. Вместо этого введите 25% (используйте расчет для любых зазоров). Это изменит размер ваших столбцов относительно доступной ширины экрана. Конечно, вы также должны применить 25% к сетке-автоматическим столбцам.
Думаю, в этой средней статье есть ответ: https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585
В основном это сводится к тому, что отдельные карты должны иметь фиксированную ширину вместо динамической, чтобы браузер не сжимал их вместе.
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));, но у меня не появляется полоса прокрутки, такая же, как и другие элементы, не существует 16.02.2019 попробуй это:
.container{
display: grid;
grid-auto-columns: max-content;
grid-template-rows: 1fr;
width: 100%;
overflow-x: auto;
}
.child{
grid-row: 1;
grid-column: auto;
}
