Setting different lengths for grid gaps in CSS Grid

Solution 1:

Is there any grid trick I can do to achieve this, grid-row-gap only seems to take one value, which it uses for all rows.

With the grid-row-gap, grid-column-gap and grid-gap properties, you cannot apply different widths to different gaps. Like you noted, only one value can be used for each axis: One for row gaps and another for column gaps (spec).

You could use margins (or padding) to show extra space, but this doesn't actually change the width of the gap. It only expands the row.

In the example below (based on your code), grid-row-gap is set to 20px. Grid items have the margin-bottom variations you set. Notice how the grip-row-gap size never changes. All changes occur inside the row.

.grid {
  display: grid;
  grid-template-columns: auto 25% 25%;
  grid-template-rows: auto auto auto;
  grid-column-gap: 40px;
  grid-row-gap: 20px;
}

div {
  background: #838383;
  height: 80px;
}

.wide {
  grid-column: 1 / span 3;
  margin-bottom: 5px;
}

.row-2 {
  background: green;
  margin-bottom: 10px;
}

.row-3 {
  background: blue;
  margin-bottom: 30px;
}

.row-4 {
  background: red;
  margin-bottom: 20px;
}

<div class="grid">
  <div class="wide"></div>
  <div class="row-2"></div>
  <div class="row-2"></div>
  <div class="row-2"></div>
  <div class="row-3"></div>
  <div class="row-3"></div>
  <div class="row-3"></div>
  <div class="row-4"></div>
  <div class="row-4"></div>
  <div class="row-4"></div>
</div>

If you want to apply different size gaps between rows, then consider using actual rows for the job:

Now the gaps between rows have their own unique heights.

.grid {
  display: grid;
  grid-template-columns: auto 25% 25%;
  grid-template-rows: 80px 5px 80px 10px 80px 30px 80px 20px; /* adjusted */
  grid-column-gap: 40px;
}

.wide {
  grid-column: 1 / span 3;
  background: #838383;
}

.row-2 {
  grid-row-start: 3;
  background: green;
}

.row-3 {
  grid-row-start: 5;
  background: blue;
}

.row-4 {
  grid-row-start: 7;
  background: red;
}

<div class="grid">
  <div class="wide"></div>
  <div class="row-2"></div>
  <div class="row-2"></div>
  <div class="row-2"></div>
  <div class="row-3"></div>
  <div class="row-3"></div>
  <div class="row-3"></div>
  <div class="row-4"></div>
  <div class="row-4"></div>
  <div class="row-4"></div>
</div>