I have used css grid to create a flexible layout, where I am able to move divs into different slots from desktop to mobile.
The issue I am having is if the content in my left div is long then the right div matches its height resulting in a large gap underneath the div on the right. I have a screenshot to demonstrate.
Divs 5 and 6, need to be kept together close. However, I also need to keep the flexiblity i have for mobile where i am using grid-template-areas to move sections around within a media query.
How can I keep divs 5 and 6 close without the gap and keep current bahaviour?
.grid-container {
display: grid;
grid-template-columns: 6fr 4fr;
gap: 2rem;
grid-template-areas:
"section1 section5"
"section2 section6"
"section3 ."
"section4 .";
@media (max-width: 768px) {
grid-template-columns: 1fr;
grid-template-areas:
"section1"
"section5"
"section2"
"section6"
"section3"
"section4";
}
}
.content-section {
background: #eee;
border: 1px solid #ccc;
padding: 1rem;
grid-area: $ {
({
area
})=>area
}
;
align-self: start;
}<div class="grid-container">
<div class="content-section" area="section1" title="Overview">
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
</div>
<div class="content-section" area="section2">2</div>
<div class="content-section" area="section3">3</div>
<div class="content-section" area="section4">4</div>
<div class="content-section" area="section5">5</div>
<div class="content-section" area="section6">6</div>
</div>
grid-area: $ { ({ area })=>area } ;