Is there a way to collapse certain grid-gaps?

Question

I've setup a grid-template but a problem has arisen in the front-end template layer. Basically there comes a time when divs with assigned grid-areas conditionally render onto the page. Being that I have a grid-row-gap declaration in place, it maintains gaps of grid template areas that aren't present on the page. I was wondering if there was a way to collapse these gaps when this sort of thing occurs.

.grid {
  display: grid;
  grid-template-areas:
    'a b'
    'a c'
    'a d'
    'a e'
    'a f';
  grid-gap: 25px;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border: 1px solid #000;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}

.f {
  grid-area: f;
}

user_8620333 · Answer

Don't use template-areas and reply on auto placement:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
  column-gap: 25px;
  margin:5px;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border: 1px solid #000;
}

.grid .a {
  grid-row: span 5; /* take 5 rows */
}

/* to replace vertical gap, don't apply to "a" and last-child */
.cell:not(.a):not(:last-child) {
  margin-bottom:25px; 
}

user_2442099 · Answer

You can think it otherwise, use template and span instead area , and margin instead grid-gap.

  .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 1em;
  background: #bee;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border: 1px solid #000;
  grid-column: 2;
}

.a {
  grid-column: 1;
  grid-row: 1 / span 10;
  /* here what you think is enough */
}

.cell:nth-child(1)~.cell {
  margin-left: 24px;
}

.cell:nth-child(2)~.cell {
  margin-top: 24px;


  A
  B
  C
  D
  E
  F



  A
  B
  D
  F

Is there a way to collapse certain grid-gaps?

2 Answers