我想在我的网格布局中的每一列上单独滚动。
目前,我正在开发一个仅限移动设备的 Web 应用程序。我想为纵向和横向使用不同的网格布局。
纵向只有 1 列,每个元素一个接一个。这里没问题。
在横向我想使用 2 列。我的全部内容显示在左侧,我的导航移动到右侧。现在我希望这两个部分都有一个单独的卷轴。有没有办法实现这个?如果当前列的内容结束,滚动应该停止。
CodePen 上的代码:https ://codepen.io/SuddenlyRust/pen/rmJOqV
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-gap: 15px 0;
}
header {
background-color: green;
grid-column: 1;
grid-row: 1
}
main {
background-color: blue;
grid-column: 1;
grid-row: 2;
}
nav {
background-color: pink;
grid-column: 1;
grid-row: 3;
}
footer {
background-color: teal;
grid-column: 1;
grid-row: 4;
}
@media only screen and (orientation: landscape) {
.grid-container {
grid-template-columns: 5fr 4fr;
}
nav {
grid-column: 2;
grid-row: 1 / span 3;
}
footer {
grid-row: 3;
}
}
h1 {
min-height: 200px;
}
<div class="grid-container">
<header>
<h1>Logo</h1>
</header>
<main>
<h1>content</h1>
</main>
<nav>
<h1>Navigation</h1>
</nav>
<footer>
<h1>Footer</h1>
</footer>
</div>
非常感谢您的宝贵时间!