I’m building a memory game and want to dynamically adjust the CSS grid layout to accommodate a variable number of cards. The challenge is to ensure that the card size remains consistent regardless of the number of cards, and that the layout remains responsive across different screen sizes. I’m unsure how to achieve this flexibility without breaking the design.
I tried using,
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
to make the grid responsive and adjust the number of cards dynamically. I expected the cards to resize and maintain consistent spacing across different screen sizes. However, the cards are not resizing properly on smaller screens, and the layout breaks when the number of cards increases.
Neeraj Kumar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
I saw your query, and would like to suggest something:
- Try using auto-fit instead of auto-fill.
- Setup a max-width for the container to prevent it from stretching too far on larger screens.
- Add a media query to provide responsiveness when changing to small screen.
I hope this helps.
Aryan C is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.