HTML & CSS CSS Grid not expanding to full width of available space.

[10weller01]

I am using CSS grid to display lots of 'tiles' on the page, each with its own clickable button that takes the user to an external link. I want the grid to take up the full width of the available space but it isn't - instead it snaps to a new width when I'm shrinking the browser window. Strangely it does work as intended when the grid is down to 2 columns.

Screen recording of how it looks.

Here is the code used for the grid:

.posts {
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  height: 100%;
}

 

[OldMan]

There is no auto-fit. Use 'auto'.

 

[10weller01]

There is no auto-fit. Use 'auto'.

Thanks for your response. I was following instructions from this site, is this incorrect?

 

[OldMan]

I use css-tricks all the time. I went to W3C to read the standards and things there have changed and I can't find my way around. Will someone help out with this?
When you tried the auto change - did it work?

 

[Krygore]

Will someone help out with this?

This was the best that I could find at w3school: https://www.w3schools.com/css/css_grid_container.asp
From what I read in it, I agree with @OldMan. You should set the grid-template-columns to auto.