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

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 grid?

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

CodePudding user response：

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 >
  <div>aaa</div>
  <div>bbb</div>
  <div>ccc</div>
</div>

CodePudding user response：

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 >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>