CSS grid overflows the specified width

Question

my CSS Grid should have a specified width of 70vw.

But when I add column-gap to the grid, it becomes larger than 70vw.

What is the solution, to avoid that?

button{
  width:100%;
}

.grid-container{
  width:70vw;
  border:1px black solid;
  display:grid;
  grid-template-columns:33.3% 33.3% 33.3%;
  justify-items:stretch;
}

.not-wanted{
  column-gap:10%;
}

Grid fits to the specified width :)
<div class="grid-container">
 <div><a href=""><button>Grid-Child 1</button></a></div>
 <div><a href=""><button>Grid-Child 2</button></a></div>
 <div><a href=""><button>Grid-Child 3</button></a></div>
</div>

<br>
Grid doesn't fit to the specified width :(
<div class="grid-container not-wanted">
 <div><a href=""><button>Grid-Child 1</button></a></div>
 <div><a href=""><button>Grid-Child 2</button></a></div>
 <div><a href=""><button>Grid-Child 3</button></a></div>
</div>

m4n0 · Accepted Answer · 2021-07-07 12:39:48Z

You can make use of fractional unit since it acts on the free space instead of % which adds 10% to the calculated width. So right now, the browser calculates the width as 43% + 43% + 43% = 129% in your example.

button {
  width: 100%;
}

.grid-container {
  width: 70vw;
  border: 1px black solid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: stretch;
}

.not-wanted {
  column-gap: 10%;
}

Grid fits to the specified width :)
<div class="grid-container">
  <div><a href=""><button>Grid-Child 1</button></a></div>
  <div><a href=""><button>Grid-Child 2</button></a></div>
  <div><a href=""><button>Grid-Child 3</button></a></div>
</div>

<br> Grid fits now after using fr unit :(
<div class="grid-container not-wanted">
  <div><a href=""><button>Grid-Child 1</button></a></div>
  <div><a href=""><button>Grid-Child 2</button></a></div>
  <div><a href=""><button>Grid-Child 3</button></a></div>
</div>

Collectives™ on Stack Overflow

CSS grid overflows the specified width

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related