2

.grid{
display:grid;
height:100vh;
grid-template-columns:20% 60% 20%;
grid-column-gap:14px;
}

.grid div{
background:orange;
}
<div class='grid'>
<div class='col'></div>
<div class='col'></div>
<div class='col'></div>
</div>

How to get the above columns gap (14px) without the bottom scrollbar, i.e. without resizing the grid?

qadenza
  • 9,025
  • 18
  • 73
  • 126

2 Answers2

4

Grid and Flex apply a minimum width equal to content, in flex we can target it with min-width property on the flex item, but when it comes to grid we can't do that directly on the element because grid establishes columns of which we put elements in, and so we need to use minmax() becuase it operates at the grid level

/* cosmetics */
body * {
  border: 1px solid;
  padding: 10px;
}
/* End cosmetics */


.grid {
  display: grid;
  height: 100vh;
  grid-template-columns: minmax( 0, 20%) minmax( 0, 60%) minmax( 0, 20%);
  grid-column-gap: 14px;
}

.grid div {
  background: orange;
}
<div class='grid'>
  <div class='col'></div>
  <div class='col'></div>
  <div class='col'></div>
</div>
Rainbow
  • 6,772
  • 3
  • 11
  • 28
  • we can control `min-width` on grid items like we do with flex items (https://stackoverflow.com/a/43312314/8620333). – Temani Afif Dec 21 '19 at 12:30
  • @TemaniAfif That's weird when i tried it didn't have an effect – Rainbow Dec 21 '19 at 12:35
  • 1
    @TemaniAfif i think i get it, `minmax()` operates at the grid level that's what is needed to resize the column. – Rainbow Dec 21 '19 at 12:39
  • 1
    because in this case we are explicitely setting the width using percentage value so min-width constraint play no role. It's only considered when using fraction unit (fr). Exactly like flexbox when flex-grow is involved but if you set the width of flex item explicitely you won't have any issue with min-width. – Temani Afif Dec 21 '19 at 12:39
  • Pretty nice trick! – Loi Nguyen Huynh Dec 21 '19 at 12:45
  • If you need to repeat this for N columns of *equal width*, use `repeat(N, calc(100%/N))` – cs95 Sep 03 '22 at 01:04
1

Because you used % to define grid-template-columns, meanwhile 20% + 60% + 20% is already 100%. So if there's gap, the grid content's width adds up will be larger than the grid itself, which occurs overflow, leads to the scroll bar that you saw.

The solution is to use the fr unit instead of %

.grid{
  display:grid;
  height:100vh;
  grid-template-columns:20fr 60fr 20fr;
  /* grid-template-columns:1fr 3fr 1fr; do the same at the above*/ 
  grid-column-gap:14px;
}

.grid div{
  background:orange;
}
<div class='grid'>
  <div class='col'></div>
  <div class='col'></div>
  <div class='col'></div>
</div>
Loi Nguyen Huynh
  • 8,492
  • 2
  • 29
  • 52
  • @qadenza I misunderstood the question. Edited it, use `fr` instead of `%`. Do you need an explanation I'll add the explanation on the answer. – Loi Nguyen Huynh Dec 21 '19 at 11:54
  • `width: 50%` doesn't really solve anything as it just lowers the width, if you add a border you will that content is still spilling out,`overflow-x: hidden` as will if there's content it will be cut off – Rainbow Dec 21 '19 at 12:18
  • Sorry, I didn't read carefully that he said `without resizing the grid` – Loi Nguyen Huynh Dec 21 '19 at 12:46
  • 1
    you should not edit your answer to inlcude details from other answers. You defeat the pupose of having multiple answers and you make the other ones look like a *copy paste* – Temani Afif Dec 21 '19 at 12:51
  • I don't think anyone would think @Zohir Salak's answer is copied from mine, I included `checkout @Zohir Salak's answer below`. Somebody has a habit of only reading the accepted answer, especially when the accepted answer is already the correct one. I just wanted to include a useful *(yet with citation)* information in mine to make it better. Anyway, I'll remove it because seemingly it *against the community purpose*. – Loi Nguyen Huynh Dec 21 '19 at 13:19