添加滚动到CSS网格布局的每一列 [英] Add scroll to each column in CSS Grid Layout

问题描述

我想在网格布局中的每个列上单独滚动。

目前，我正在开发一个仅限移动的web应用程序。我想为纵向和横向使用不同的网格布局。

纵向只是一列，每一个元素都在另一个之后。这里没有问题。

在横向我想使用2列。我的全部内容显示在左侧，我的导航移动到右侧。现在我想要两个部分都有一个单独的滚动。有没有办法来实现这个？如果当前列的内容结束，滚动应该停止。

CodePen上的代码： https://codepen.io/SuddenlyRust/pen/rmJOqV

$ b

  .grid-container {display：grid; grid-template-columns：1fr; grid-template-rows：1fr; grid-gap：15px 0;} header {background-color：green;网格列：1; grid-row：1} main {background-color：blue;网格列：1; grid-row：2;} nav {background-color：pink;网格列：1; grid-row：3;} footer {background-color：teal;网格列：1; grid-row：4;} @ media only screen and（orientation：landscape）{.grid-container {grid-template-columns：5fr 4fr; } nav {grid-column：2;网格行：1 / span 3; } footer {grid-row：3; }} h1 {min-height：200px;}  

< code< ; div class =grid-container> <报头GT; < H1>标志< / H1> < /报头> <主> < H1>内容< / H1> < /主> < NAV> < H1>导航和LT; / H1> < / NAV> <页脚> < H1>页脚< / H1> < / foot>< / div>

很多你的时间！

解决方案

在横向方向我想使用2列。我的全部内容显示在左侧，我的导航移动到右侧。现在我想要两个部分都有一个单独的滚动。有没有办法来实现这个？

在左栏中，您有三个单独的网格项目：头，主要和页脚元素

在右栏有一个网格项： nav 元素。

添加滚动条和ndash;垂直或水平–到左栏是不可行的，因为有三个单独的元素。您需要将所有元素包装在一个容器中，以便单个滚动条工作。

添加滚动条和ndash;垂直或水平–到右栏是非常容易的，因为只有一个元素。

假设您正在讨论一个垂直滚动条，下面是一个方法来使它工作： data-console =falsedata-console =false> div class =snippet-code>

body {margin：0;}。 grid-template-columns：1fr; grid-template-rows：1fr; grid-gap：15px 0; height：100vh;} header {background-color：green;网格列：1; grid-row：1} main {background-color：blue;网格列：1; grid-row：2;} nav {background-color：pink;网格列：1;网格行：3; overflow：auto;} footer {background-color：teal;网格列：1; grid-row：4;} @ media only screen and（orientation：landscape）{.grid-container {grid-template-columns：5fr 4fr; grid-template-rows：1fr 1fr 1fr; } nav {grid-column：2;网格行：1 / span 3; } footer {grid-row：3; }

< div class =grid-container > <报头GT; < H1>标志< / H1> < /报头> <主> < H1>内容< / H1> < /主> < NAV> < h1>导航< br>< br>导航项目< br>导航项目< br>导航项目< br>导航项目>导航项目>导航项目< br>导航项目>导航项目< br>导航项目>导航项目< br>导航项目>导航项目>导航项目>导航项目>< br> br>导航项目>导航项目< br>导航项目>导航项目< br>导航项目>导航项目>导航项目>导航项目>< br> br>导航项目>导航项目< br>导航项目>导航项目< br>导航项目>导航项目>导航项目>导航项目>< br> br>导航项目>导航项目< br>导航项目< br>导航项目< br>导航项目>导航项目< br>< / h1> < / NAV> <页脚> < H1>页脚< / H1> < / footer>< / div>

b
修改后的codepen

---

浏览器支持CSS Grid

$ b

• 截至2017年3月8日（第57版）


• Firefox - 截至2017年3月6日的全面支持（第52版）
  
• 截至2017年3月26日（版本10.1）。
  
• Edge - 截至2017年10月16日的全面支持（版本16）


• IE11 - 不支持目前的规格;支持过时版本
http://caniuse.com/#search=grid



I want separate scroll on each of my columns in my grid layout.

Currently, I am developing a mobile only web application. I want to use a different grid layout for the portrait and landscape orientations.

The portrait orientation is just 1 column and every element is after the other. No problem here.

In the landscape orientation I want to use 2 columns. My whole content is displayed on the left side and my navigation moves to the right side. Now I want both parts to have a separate scroll. Is there a way to implement this? And the scroll should stop if the content of the current column ends.

Code on 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>

Thank you very much for your time!

解决方案

In the landscape orientation I want to use 2 columns. My whole content is displayed on the left side and my navigation moves to the right side. Now I want both parts to have a separate scroll. Is there a way to implement this? And the scroll should stop if the content of the current column ends.

In the left column you have three separate grid items: the header, main and footer elements.

In the right column you have one grid item: the nav element.

Adding a scrollbar – vertical or horizontal – to the left column is not feasible because there are three separate elements. You would need to wrap all elements in a container for a single scrollbar to work.

Adding a scrollbar – vertical or horizontal – to the right column is pretty easy because there is only one element.

Assuming that you're talking about a vertical scrollbar, here's one way to make it work:

body {
  margin: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-gap: 15px 0;
  height: 100vh;
}

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;
  overflow: auto;
}

footer {
  background-color: teal;
  grid-column: 1;
  grid-row: 4;
}

@media only screen and (orientation: landscape) {
  .grid-container {
    grid-template-columns: 5fr 4fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  nav {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
  footer {
    grid-row: 3;
  }
}

<div class="grid-container">
  <header>
    <h1>Logo</h1>
  </header>
  <main>
    <h1>content</h1>
  </main>
  <nav>
    <h1>Navigation<br><br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br></h1>
  </nav>
  <footer>
    <h1>Footer</h1>
  </footer>
</div>

revised codepen

---

Browser Support for CSS Grid

• Chrome - full support as of March 8, 2017 (version 57)
• Firefox - full support as of March 6, 2017 (version 52)
• Safari - full support as of March 26, 2017 (version 10.1)
• Edge - full support as of October 16, 2017 (version 16)
• IE11 - no support for current spec; supports obsolete version

Here's the complete picture: http://caniuse.com/#search=grid

这篇关于添加滚动到CSS网格布局的每一列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！