I am working with a grid layout that has defined grid areas and a grid-gap, but some areas may not always have content. How can I prevent a double gap between items when an area is empty without changing the grid-template?
For example:
.grid {
display: grid;
grid-template-areas: "area-1" "empty-area" "area-3" "area-4";
grid-template-columns: auto;
grid-gap: 20px;
}
.area-1 {
grid-area: area-1;
background: red;
}
.area-3 {
grid-area: area-3;
background: green;
}
.area-4 {
grid-area: area-4;
background: blue;
}<div class="grid">
<div class="area-1">Hello</div>
<!-- empty area is missing -->
<div class="area-3">World</div>
<div class="area-4">!</div>
</div>