Search code examples
csscss-gridgrid-layout

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

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

Solution

  • 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>