How to collapse vertical space around grid items? - css

Question

With a screen size > 576px and without changing the HTML, how can I collapse the divs so that the divs in the right-hand column appear below each other with only a 10px grid-row-gap.
The description, features and tick-features divs all have dynamic content.
.container {
display: grid;
grid-row-gap: 10px;
background: lightgray;
font-family: sans-serif;
padding: 0;
}
.container h1, .container div {
color: white;
padding: 10px;
margin: 0;
}
.container h1 {
background: blue;
}
.container .description {
background: darkslategray;
}
.container .features {
background: green;
}
.container .tick-features {
background: purple;
}
.container .static-map {
background: maroon;
}
.container .full-width {
background: darkolivegreen;
}
#media screen and (min-width: 576px) {
.container {
grid-template-columns: 50% 1fr;
grid-template-rows: auto;
grid-column-gap: 10px;
max-width: 700px;
}
.container h1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.container .description {
grid-column: 1/2;
grid-row: 2/5;
height: 500px;
}
.container .features {
grid-column: 2 /3;
grid-row: 2 / 3;
height: 100px;
}
.container .tick-features {
grid-column: 2 /3;
grid-row: 3 / 4;
height: 100px;
}
.container .static-map {
grid-column: 2 /3;
grid-row: 4 / 5;
}
.container .full-width {
grid-column: 1 / 3;
grid-row: 5 / 6;
}
}
<div class="container">
<h1>HEADER</h1>
<div class="features">Features</div>
<div class="description">Description</div>
<div class="tick-features">Tick features</div>
<div class="static-map">Static Map</div>
<div class="full-width">Full width div</div>
</div>
Adding images to show what I'm trying to achieve.
+++

Answer 1

The Problem
It's important to note that the cells in the right-hand column are already next to each other, separated only by the 10px row gap.
As you can see with the dashed outlines, there is no wide vertical gap between the cells on the right. The are right next to each other.
The problem is that each item within the cell has a lower height than the row it's in.
.container .features {
grid-column: 2 /3;
grid-row: 2 / 3;
height: 100px;
}
.container .tick-features {
grid-column: 2 /3;
grid-row: 3 / 4;
height: 100px;
}
With each item set to height: 100px, it doesn't cover the full height of the cell, leaving a lot of empty space.
Solutions
Depending on what exactly you need, you can approach the problem in various ways. Here are two:
1. Use min-height instead of height
Replace height: 100px with min-height: 100px, allowing the items to consume all free space. (Consider a similar switch for the .description item.)
.container {
display: grid;
grid-row-gap: 10px;
background: lightgray;
font-family: sans-serif;
padding: 0;
}
.container h1,
.container div {
color: white;
padding: 10px;
margin: 0;
}
.container h1 {
background: blue;
}
.container .description {
background: darkslategray;
}
.container .features {
background: green;
}
.container .tick-features {
background: purple;
}
.container .static-map {
background: maroon;
}
.container .full-width {
background: darkolivegreen;
}
#media screen and (min-width: 576px) {
.container {
grid-template-columns: 50% 1fr;
grid-template-rows: auto;
grid-column-gap: 10px;
max-width: 700px;
}
.container h1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.container .description {
grid-column: 1/2;
grid-row: 2/5;
/* height: 500px; */
min-height: 500px; /* new */
}
.container .features {
grid-column: 2 /3;
grid-row: 2 / 3;
/* height: 100px; */
min-height: 100px; /* new */
}
.container .tick-features {
grid-column: 2 /3;
grid-row: 3 / 4;
/* height: 100px; */
min-height: 100px; /* new */
}
.container .static-map {
grid-column: 2 /3;
grid-row: 4 / 5;
}
.container .full-width {
grid-column: 1 / 3;
grid-row: 5 / 6;
}
}
<div class="container">
<h1>HEADER</h1>
<div class="features">Features</div>
<div class="description">Description</div>
<div class="tick-features">Tick features</div>
<div class="static-map">Static Map</div>
<div class="full-width">Full width div</div>
</div>
2. Use grid-template-rows
You may also be able to handle the problem at the container level, using grid-template-rows.
.container {
display: grid;
grid-row-gap: 10px;
background: lightgray;
font-family: sans-serif;
padding: 0;
}
.container h1,
.container div {
color: white;
padding: 10px;
margin: 0;
}
.container h1 {
background: blue;
}
.container .description {
background: darkslategray;
}
.container .features {
background: green;
}
.container .tick-features {
background: purple;
}
.container .static-map {
background: maroon;
}
.container .full-width {
background: darkolivegreen;
}
#media screen and (min-width: 576px) {
.container {
grid-template-columns: 50% 1fr;
grid-template-rows: 50px minmax(100px, 1fr) minmax(100px, 1fr) 100px 50px;
grid-column-gap: 10px;
max-width: 700px;
}
.container h1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.container .description {
grid-column: 1/2;
grid-row: 2/5;
/* height: 500px; */
}
.container .features {
grid-column: 2 /3;
grid-row: 2 / 3;
/* height: 100px */
}
.container .tick-features {
grid-column: 2 /3;
grid-row: 3 / 4;
/* height: 100px; */
}
.container .static-map {
grid-column: 2 /3;
grid-row: 4 / 5;
}
.container .full-width {
grid-column: 1 / 3;
grid-row: 5 / 6;
}
}
<div class="container">
<h1>HEADER</h1>
<div class="features">Features</div>
<div class="description">Description</div>
<div class="tick-features">Tick features</div>
<div class="static-map">Static Map</div>
<div class="full-width">Full width div</div>
</div>