Avoid Bigger Space on right side of cards using grid

[past relic]

for individual card items the className is .van

following is the code i used for grid layout
and key constraint is to have max-width on cards: 23rem

How to avoid that space on right of cards

Any help would be appreciated

.vans-container {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(23rem, 23rem)
    );
    gap: 3rem;
}

and .van has no styles defined

[pulsar crown]

Are you talking the gap between the cards? Maybe reduce or remove the gap: 3rem;...

[sullen jackal]

not sure I understand, are you talking about That white space on the right hand side? Then just center your container (title+grid)

[pulsar crown]

Ahhh! I think you got it @sullen jackal - that makes much more sense than what I was thinking!

[past relic]

On removing the gap , on small screen the space on right still persist

I was looking for some layout adjustment

[pulsar crown]

If that is indeed the case then maybe you could fix your minmax() function - what it's doing now is unnecessary anyways... to this:

minmax(23rem, 1fr)

[past relic]

Same with this also , i tried but space still persist

[pulsar crown]

Please clarify what space you're talking about - between the cards or the gap to the right of the cards?

[past relic]

The bigger space on the right side of all cards

[pulsar crown]

Ok, perfect... So try adjusting the minmax as I said and let us know.

[past relic]

Ok cool will try that out
Thanks for the suggestions and help 😃
@sullen jackal
@pulsar crown

[pulsar crown]

👍

Oh... and you may want to try auto-fit instead of auto-fill....
[EDIT:] This is probably a bad idea after some more thought...

[past relic]

Avoid Bigger Space on right side of cards using grid

[past relic]

hey guys the problem resolved

media query to the rescue

.vans-container {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(23rem, 1fr)
    );
    gap: 2rem;
}

@media (min-width:530px){
    .van{
        max-width: 23rem;
    }
}