CODEWITHSUNDEEP
csscss-grid
Carl Edwards
Carl Edwards

Reputation: 14434

Is there a way to collapse certain grid-gaps?

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;
}
<div class="grid">
  <div class="a cell">A</div>
  <div class="b cell">B</div>
  <!-- <div class="c cell">C</div> -->
  <!-- <div class="d cell">D</div> -->
  <div class="e cell">E</div>
  <div class="f cell">F</div>
</div>

Upvotes: 5

Views: 2913

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105903

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;
<div class="grid">
  <div class="a cell">A</div>
  <div class="b cell">B</div>
  <div class="c cell">C</div>
  <div class="d cell">D</div>
  <div class="e cell">E</div>
  <div class="f cell">F</div>
</div>

<div class="grid">
  <div class="a cell">A</div>
  <div class="b cell">B</div>
  <div class="d cell">D</div>
  <div class="f cell">F</div>
</div>

Upvotes: 2

Temani Afif
Temani Afif

Reputation: 272965

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; 
}
<div class="grid">
  <div class="a cell">A</div>
  <div class="b cell">B</div>
  <!-- <div class="c cell">C</div> -->
  <!-- <div class="d cell">D</div> -->
  <div class="e cell">E</div>
  <div class="f cell">F</div>
</div>

<div class="grid">
  <div class="a cell">A</div>
  <div class="b cell">B</div>
  <div class="c cell">C</div> 
  <!-- <div class="d cell">D</div> -->
  <div class="e cell">E</div>
  <div class="f cell">F</div>
</div>

<div class="grid">
  <div class="a cell">A</div>
  <div class="b cell">B</div>
  <div class="c cell">C</div> 
</div>

Upvotes: 2

Related Questions