How do make columns in a grid "space-evenly" like with flexbox?

Question

I have this grid CSS

.grid {
    display: grid;
    grid-column-gap: 50px;
    grid-template-columns: repeat(3, 1fr);
}

which is sitting in a div with width: 500px

but I noticed that the first item in the grid "hugs" the left edge of the div but the far most right item doesn't touch the edge of the div.

In flexbox I could achieve this with (near enough):

.flex {
    display: flex;
    justify-content: space-between;
 }

how do I do this responsively with the grid?

I know I can change the grid-column-gap but that seems flakey

Popedom

you should try gap – Gametophyte

also justify-content: space-between; it does work with CSS grid – Sporocarp

CSS-Tricks: justify-content – Terpineol

Answer 1

Use auto instead of 1fr and the same justify-content will work like with flexbox:

.grid {
  display: grid;
  grid-column-gap: 50px;
  grid-template-columns: repeat(3, auto);
  justify-content:space-between;
}

<div class="grid">
  <div>aaa</div>
  <div>bbb</div>
  <div>ccc</div>
</div>

Sporocarp

grid-template-columns: repeat(3, auto); can safely be replaced by grid-auto-flow: column; then, right? – Stipe

@Stipe yes if you want only one row but not if you want more elements (more rows) and still keep 3 columns – Sporocarp

Answer 2

Consider using auto-fit keyword to fit columns into the available row space by expanding them.

.grid-container {
  display: grid;
  grid-column-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.grid-item {
  background-color: blue;
  padding: 30px;
}

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Sixpack