To maximize space between content use justify-content:

.container {
  justify-content: space-between;
}

I have a css grid. I would like the elements in the grid to have a minimum grid gap of 35 px. I would like the elements to have a maximum width of 286 pixels. If the space between elements is greater than 35 pixels, I would like the space between elements to be the maximum. I created a picture below to illustrate what I want.

The green shows the grid.
The blue shows the minimum gap between boxes, After the gap get’s below this grid, the boxes should go on a new line or start shrinking.

Currently I am getting the result on top, but I would like the result on the bottom. I want the elements to be pushed to the sides of the grid. Currently there is extra space between the right most element and the grid.

This is the code I’m using which currently produces these results

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