Can Grid-Row-Gap/Grip-Column-Gap Be Overridden for a Single Gutter

Can grid-row-gap / grip-column-gap be overridden for a single gutter?

The grid-row-gap and grid-column-gap properties apply to the entire grid (spec reference).

However, you can use negative margins on the second row grid items to adjust their position.

Another option would be to remove the top row (headers) from the current grid and place it in a different container directly above the data. This would eliminate the grid-gap problem.

CSS Grid row/column gap on specific elements?

It's impossible to change the gap on specific elements.

However, you can reference specific grid item with grid-item:nth-child(n) and set negative margins to it.

For example, with a class of picture-1 it may look like this in the CSS file:

.picture-1:nth-child(3) {
  margin-bottom: -50px;
}

Removing grid gaps

You cannot set multiple sizes for grid gaps. The column-gap and row-gap properties (previously grid-column-gap and grid-row-gap) accept only a single value.

This issue is covered in detail here:

• Setting different lengths for grid gaps in CSS Grid

---

Pseudo-elements applied to a grid container are considered grid items.

This behavior is explained here:

• pseudo-element acting like a grid item in CSS grid

---

The order property can be used to re-arrange grid items on the screen.

More details here:

• Consider the order property of flex and grid layouts

---

Taken in combination, you can create the column gaps – there are only two – with ::before and ::after pseudo-elements, arrange their placement with the order property, and get rid of the grid-column-gap rule.

.myRow {  display: grid;  grid-template-columns: 0.1fr 0.1fr 2fr auto 3fr auto 2fr;  justify-content: center;  padding: 10px;}
.myRow::before {  content: "";  width: 10px;  background-color: white;}
.myRow::after {  content: "";  width: 10px;  background-color: white;}
.myRow > :nth-child(1) { order: -3; }.myRow > :nth-child(2) { order: -2; }.myRow > :nth-child(3) { order: -1; }.myRow > :nth-child(5) { order: 1; }
.myRow > div {  background-color: lightgray;}

<div class="myRow">  <div style="color:blue;">aa</div>  <div style="color:red;">bb</div>  <div style="color:green;">ccc</div>  <div style="color:orange;">ddd</div>  <div style="color:purple;">eee</div></div>

Why does grid-gap cause an overflow?

Short Answer

Because the width of the columns plus the width of the gaps is greater than 100%.

---

Explanation

You have a 3-column grid container (.body):

grid-template-columns: 25% 50% 25%

The total width of those columns is 100%.

You're then adding gutters between the columns (and rows):

grid-gap: 10px

which is shorthand for:

grid-column-gap: 10px;
grid-row-gap: 10px;

So this becomes the width calculation:

25% + 50% + 25% + 10px + 10px

Hence,

100% + 20px > 100%, which results in an overflow condition

Note that the grid-*-gap properties apply only between grid items – never between items and the container. That's why we calculate two grid gaps, not four.

As a solution, instead of percentage units, try using fr units, which apply only to free space. This means that fr lengths are calculated after any grid-gap lengths are applied.

grid-template-columns: 1fr 2fr 1fr

div:not(.header):not(.body):not(.row) {
  border: 1px solid grey;
}

.header {
  margin-top: 20px;
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "header-left header-right-up" "header-left header-right-down";
  grid-template-rows: 40px 40px;
  grid-template-columns: minmax(50px, 200px) auto;
}

.header-left {
  grid-area: header-left;
}

.header-right-up {
  grid-area: header-right-up;
}

.header-right-down {
  grid-area: header-right-down;
}

.body {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* ADJUSTMENT */
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

.row-left {}

.row-center {}

.row-right {}

<div class="header">
  <div class="header-left">image</div>
  <div class="header-right-up">content</div>
  <div class="header-right-down">long content</div>
</div>

<div class="body">
  <div class="row-left"></div>
  <div class="row-center"></div>
  <div class="row-right"></div>

  <div class="row-left"></div>
  <div class="row-center"></div>
  <div class="row-right"></div>

  <div class="row-left"></div>
  <div class="row-center"></div>
  <div class="row-right"></div>
</div>

---

Related Topics