https://i.stack.imgur.com/y6F74.png
I am currently working with a CSS Grid layout and facing an issue where I want to center the child elements horizontally. In the image provided, my goal is to have "Queen" displayed in the center rather than on the left side as shown.
Despite attempting to use align-items: center and justify-content: center, I have been unsuccessful in achieving the desired outcome. What steps should I take next?
Here is the CSS (scss) code for the grid container (parent):
display: grid;
gap: 1rem 0;
grid-template-columns: 1fr;
--node-min-width: 235px;
@media (min-width: 576px){
grid-template-columns: repeat(auto-fit, minmax(var(--node-min-width), 1fr));
}