How do I change the size of grid cells to better fit its content?

June 13, 2023

As you can see the content inside the grid cell does not fit the size of the grid cell. I am trying to change the size of the grid cell to better fit the content inside.

This is the code responsible for the grid:

main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(589.19px, 1fr));
    overflow-x: hidden;
    justify-items: center;
    align-items: center;
}

>Solution :

Currently your property grid-template-columns: repeat(auto-fit, minmax(589.19px, 1fr));, specifically auto-fit ensures the grid fills the space and doesn’t leave empty space in the line.
You can use:
grid-template-columns: repeat(2, minmax(589.19px, min-content)); and in case 589.19px is too wide for you maybe repeat(2, min-content) will work better.

The repeat function takes two arguments the first one is the repeat count. When set to auto-fit it repeats until the line is filled, if you set two 2 you repeat it twice.