Add scroll to every column in CSS grid layout
I want separate scrolling on each of my columns in the grid layout.
I am currently developing only a mobile web app. I want to use a different grid layout for portrait and landscape.
Portrait orientation is just 1 column and each item is different. There is no problem here.
In landscape orientation, I want to use 2 columns. All my content is displayed on the left side and my navigation moves to the right. Now I want both parts to have a separate scroll. Is there a way to implement this? And the scrolling should stop if the content of the current column ends.
Code in 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>
Thanks a lot for your time!
source to share
In landscape orientation, I want to use 2 columns. All my content is displayed on the left side and my navigation moves to the right. Now I want both parts to have a separate scroll. Is there a way to implement this? And the scrolling should stop if the content of the current column ends.
In the left column, you have three separate grid items: items header
, main
and footer
.
The right column has one grid item: item nav
.
Adding a scrollbar - vertical or horizontal - in the left column is not possible because there are three separate items. You will need to wrap all the items in the container for one scrollbar to work.
Adding a scrollbar - vertical or horizontal - in the right column is pretty easy because there is only one item.
Assuming you are 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>
Browser support for CSS grid
- Chrome - Full support as of 8 March 2017 (version 57)
- Firefox - Full support as of 6 March 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 the current specification; supports outdated version
Here's the complete picture: http://caniuse.com/#search=grid
source to share
Here is an expanded version from my answer to your previous question , how to get scrolling for header / content / main and nav using flexbox
.
Fragment of the stack
(function(d, timeout) {
window.addEventListener("load", function() {
resizeHandler();
}, false);
window.addEventListener("resize", function() {
if (!timeout) {
timeout = setTimeout(function() {
timeout = null;
// do resize stuff
resizeHandler();
}, 66);
}
}, false);
function resizeHandler() {
if (window.innerHeight < window.innerWidth) {
if (!(d.body.classList.contains('landscape'))) {
d.body.classList.add('landscape');
d.body.appendChild(d.querySelector('nav'));
}
} else {
if (d.body.classList.contains('landscape')) {
d.body.classList.remove('landscape')
d.querySelector('section').appendChild(d.querySelector('nav'));
}
}
}
}(document));
html, body {
margin:0;
}
header, footer, main, nav {
margin: 5px;
padding: 5px;
border-radius: 5px;
min-height: 120px;
border: 1px solid #eebb55;
background: #ffeebb;
}
footer {
order: 2;
}
nav {
order: 1;
}
section {
display: flex;
flex-direction: column;
}
@media only screen and (orientation: landscape) {
main div {
height: 400px;
border: 1px dashed red;
}
nav div {
height: 800px;
border: 1px dashed red;
}
body.landscape {
display: flex;
}
section {
display: block;
width: calc(60% - 10px); /* 10px is for the margin */
box-sizing: border-box;
max-height: calc(100vh - 20px);
overflow: auto;
}
nav {
width: calc(40% - 10px); /* 10px is for the margin */
box-sizing: border-box;
max-height: calc(100vh - 20px);
overflow: auto;
}
}
<section>
<header>header</header>
<main>content
<div>
This div get a height when in landscape to show scroll in section
</div>
</main>
<footer>footer</footer>
<nav>navigation
<div>
This div get a height when in landscape to show scroll in nav
</div>
</nav>
</section>
source to share