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>