Is there an easy way to solve this problem with CSS Grid and dynamic items placement? I'm still learning the ins and outs of CSS Grid and could use some guidance.
When my layout has many items, everything is fine:
https://i.sstatic.net/Z2aX0.png
However, when I only have one or two items, they center themselves:
https://i.sstatic.net/MsHi6.png
I would like them to align to the left instead.
This is my current code snippet:
.container {
padding: 16px 24px;
display: grid;
grid-column-gap: 1rem;
grid-row-gap: 1rem;
grid-template-columns: auto auto auto;
}
Your help would be greatly appreciated. Thank you!