CSS Grid: ignore grid-gap if area is empty

user_639035 0
Viewed 1507

I have a simple grid layout with a grid-gap and defined grid-areas. However not all areas have content all the time. If an area doesn't have content, I don't want there to be a double the gap in between the items. Is there ignore the gap on empty areas, without using a different grid-template, to ignore the double gap between items?

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>

css-grid css
1 Answers
**html**
    <div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
</div>

**css**
.container {


 display: grid;
  grid-template-columns: 1fr 1fr 200px;


 grid-template-rows: auto;
}

.item {
background: hsl(162, 76%, 32%);
  padding: 1rem;
}
user_183315430
Related