Create implicit rows in CSS grid - css

Question

I have a simple CSS grid.
I would like to have the #right and the main element under each other on a mobile view (800px width).
I thought that adding this:
main,
#right {
grid-column: 2 / span 2;
}
would put the main and #right element under each other, but no such luck. It seems they both have a 100% height causing them to overlap.
So what I would like to see is:
main {
margin-top: 90%;
height: 50%;
}
#right {
height: 50%;
}
But then of course caused by the CSS grid.
https://plnkr.co/edit/J0gZRP9LUak4n6eebnhh?p=preview
body,
html {
height: 100%;
}
#grid-wrapper {
height: 100vh;
display: grid;
grid-template: "header header header" 66px "subheader subheader subheader" 55px "left main right" auto / 18.75% auto 25%;
}
header {
grid-area: header;
display: grid;
grid-template: "logo searchbar hamburgermenu" auto / 18.75% auto 25%;
}
header #logo {
grid-area: logo;
background: red;
}
header #searchbar {
grid-area: searchbar;
background: yellow;
}
header #hamburgermenu {
grid-area: hamburgermenu;
background: teal;
}
.subheader {
grid-area: subheader;
display: grid;
grid-template: ". telephone-content ." auto / 18.75% auto 25%;
background: wheat;
}
.subheader .telephone-content {
grid-area: telephone-content;
background: lightcoral;
}
#left {
grid-area: left;
background: darkgray;
}
main {
grid-area: main;
background: lightskyblue;
}
#right {
grid-area: right;
background: lightsalmon;
}
/* TABLET VIEW */
#media screen and (max-width: 1024px) {
header {
grid-template: "logo searchbar hamburgermenu" auto / 6.75% auto 25%;
}
.subheader {
grid-template: ". telephone-content ." auto / 6.75% auto 25%;
}
#grid-wrapper {
grid-template: "header header header" 66px "subheader subheader subheader" 55px "left main right" auto / 6.75% auto 25%;
}
}
/* MOBILE VIEW */
#media screen and (max-width: 800px) {
header {
grid-template: "logo searchbar hamburgermenu" auto / 66px auto 66px;
}
.subheader {
grid-template: "telephone-content telephone-content telephone-content" auto / 66px auto 66px;
}
#grid-wrapper {
grid-template: "header header header" 66px "subheader subheader subheader" 55px "left main right" auto / 6.75% auto 25%;
}
#left {
/* grid-row: 1 / span 2; */
}
#right {
/* grid-column: 2 / 3; */
}
main,
#right {
grid-column: 2 / span 2;
}
}
<div id="grid-wrapper">
<header>
<div id="logo">
<h1>Logo</h1>
</div>
<div id="searchbar">
<p>Header stuff</p>
</div>
<div id="hamburgermenu">
<h1>...</h1>
</div>
</header>
<div class="subheader">
<p class="telephone-content">Dit is telefoon informatie</p>
</div>
<aside id="left">
<h1>Left</h1>
</aside>
<main>
<h1>Content</h1>
<p>Saaie boel</p>
</main>
<aside id="right">
<h1>Right</h1>
</aside>
</div>
</div>

Answer 1

This is what you have in your mobile view:
#media screen and (max-width: 800px) {
#grid-wrapper {
grid-template: "header header header" 66px
"subheader subheader subheader" 55px
"left main right" auto / 6.75% auto 25%;
}
This layout produces three rows and three columns.
row heights: 66px 55px auto
column widths: 6.75% auto 25%
But you want right to appear underneath main (or vice versa?). So try this instead:
#media screen and (max-width: 800px) {
#grid-wrapper {
grid-template: "header header header" 66px
"subheader subheader subheader" 55px
"left main main" auto /* adjustment */
"left right right" auto /* new row */
/ 6.75% auto 25%;
}
https://plnkr.co/edit/X3nlF5Jx3vSdUm52DoyZ?p=preview