Adaptive 3-columns layout with flexible height of the items without JS? - html

Question

I have a layout for the whole website which is quite standard - header/footer, two side blocks and the main content in the center. Let's put footer/header away, they're not really interesting. What I want to achieve is two things:
Make adaptive layout on mobile phones by putting red block between cyan and green.
In the same time keep the layout on desktops flexible. Namely, I don't want to have extra spaces between blue and red blocks (when cyan block has a lot of content), nor I want extra spaces between cyan and green blocks (when blue block has a lot of content)
First I did it with flexbox, but bullet #1 was not possible in Flex. Now I rewrote it to using Grid and faced issues with #2.
Question - how do I make grid elements in each column "independent" from each other in terms of height (keeping the deterministic behavior, of course)?
Here is the schematic layout (top - desktop, bottom - mobile):
And here is the CodePen example (click on magenta block to check how does it behave and what's the issue)
var testing = true;
function startTime() {
if (testing) {
document.getElementById('info').innerHTML = "<br>LongLongContent<br>LongLongContent<br><br>LongLongContent<br>LongLongContent<br>LongLongContent<br>LongLongContent<br>LongLongContent<br>LongLongContent<br>LongLongContent<br>LongLongContent<br>";
document.getElementById('content').innerHTML = "Short content (logs block should start just after me)";
} else {
document.getElementById('content').innerHTML = "<br>LongLongContent<br>LongLongContent<br>LongLongContent<br>LongLongContent<br>LongLongContent<br>LongLongContent<br>LongLongContent<br>LongLongContent<br>";
document.getElementById('info').innerHTML = "Short content (photos block should start just after me)";
}
testing = !testing;
}
.grid-container {
display: grid;
grid-template-columns: 210px 1fr 200px;
grid-template-rows: repeat(4, auto);
gap: 0px 0px;
grid-template-areas: "header header header"
"info content sidebar"
"photos logs sidebar"
"footer footer footer";
}
.grid-container>* {
border: 1px solid red;
}
.header {
grid-area: header;
}
.info {
grid-area: info;
background-color: blue;
color: white;
}
.photos {
grid-area: photos;
background-color: red;
}
.footer {
grid-area: footer;
}
.sidebar {
grid-area: sidebar;
background-color: magenta;
}
.content {
grid-area: content;
background-color: cyan;
}
.logs {
grid-area: logs;
background-color: green;
}
<header class="grid-container">
<header class="header">Header</header>
<div class="info" id="info">Info<br>Info<br>Info<br>Info<br>Info<br>Info<br><br>Info<br></div>
<div class="photos">Photos<br>Photos<br>Photos<br>Photos<br>Photos<br></div>
<div class="content" id="content">content<br>asdasd<br><br><br>[I'm some random empty space =(]</div>
<div class="logs">logs</div>
<div class="sidebar" id="sidebar" onclick="startTime()">Click me to toggle between different sizes of content</div>
<footer class="footer">Footer</footer>
</div>

Answer 1

The following code shows the implementation of the structure of a variable height grid. Note that the corresponding columns must be the same height.
Using grid-template-areas: you can implement your desired structure.
Pay attention to how to implement the grid-container class
.grid-container {
display: grid;
grid-template-columns: 25% 50% 25%;
grid-gap: 0px;
background-color: black;
grid-template-areas:
"one two three"
"one four three"
"five six three"
}
With grid-template-columns: 25% 50% 25%; 3 columns are defined.
Then with
grid-template-areas:
"one two three"
"one four three"
"five six three"
3 rows are defined by 3 columns.
I used the following code for the responsive mode
#media only screen and (max-width: 600px) {
.grid-container {
display: grid;
grid-template-columns: 100%;
grid-gap: 10px;
background-color: black;
grid-template-areas:
"two"
"four"
"five"
"six"
}
}
Full code:
.grid-container {
display: grid;
grid-template-columns: 25% 50% 25%;
grid-gap: 0px;
background-color: black;
grid-template-areas: "one two three" "one four three" "five six three"
}
#one {
grid-area: one;
height: auto;
width: 100%;
background-color: blue;
}
#two {
grid-area: two;
height: 50px;
width: 100%;
background-color: yellow;
}
#three {
grid-area: three;
height: auto;
width: 100%;
background-color: #365263;
}
#four {
grid-area: four;
height: auto;
width: 100%;
background-color: aqua;
}
#five {
grid-area: five;
height: auto;
width: 100%;
background-color: red;
}
#six {
grid-area: six;
height: auto;
width: 100%;
background-color: green;
}
.grid-container>div {
text-align: center;
padding: 20px 0;
font-size: 30px;
}
#media only screen and (max-width: 600px) {
.grid-container {
display: grid;
grid-template-columns: 100%;
grid-gap: 10px;
background-color: black;
grid-template-areas: "two" "four" "five" "six"
}
}
<h1>The grid-column Property</h1>
<div class="grid-container">
<div id="one">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>1</div>
<div id="two"></div>
<div id="three">3</div>
<div id="four">4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br></div>
<div id="five">5</div>
<div id="six">6</div>
</div>