CODEWITHSUNDEEP
csscss-grid
nathan_393
nathan_393

Reputation: 21

column-gap adds gutter after final column

I've put together a sixteen column grid with some pretty simple CSS, which I've simplified further to demonstrate below.:

.grid {
  display:grid;
  grid-template-columns:repeat(16, 1fr);
  column-gap:10px;
  width:400px;
}

.child {
  background:#ccc;
  height:100px;
}

.child.one {
  grid-column:1 / span 4;
 }
 
 .child.two {
  grid-column:5 / span 4;
 }
 
 .child.three {
  grid-column:9 / span 4;
 }
 
 .child.four {
  grid-column:13 / span 4;
 }
<div class="grid">
  <div class="child one"></div>
  <div class="child two"></div>
  <div class="child three"></div>
  <div class="child four"></div>
</div><!--.grid-->

When I run this code in Chrome, column-gap is adding a gutter after the final column. The same thing happens in Safari. I'm adding a screenshot below as well.

Shouldn't column-gap only apply with adjacent cells? How can I remove the gutter after the final column? What's the workaround for this?

It's very possible I've made a dumb mistake, but if so, I can't figure out what it would be. Thanks in advance for your help.

Column-gap flaw in Chrome

Upvotes: 1

Views: 1270

Answers (1)

nathan_393
nathan_393

Reputation: 21

I figured out the problem.

I had one element in the grid, after these columns, that spanned the width of the entire grid. The CSS for it looked like this:

.grid-item {
    grid-column:1 / span all;
}

It was the "span all" that messed this up. Using grid-column:1 / -1 on the full-width child makes the gutters appear as they should.

Upvotes: 1

Related Questions