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

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;
}

enter image description here

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

Leave a Reply