Hey

I am experiencing problems implementing a responsive and accessible multi-column layout using CSS Grid. Despite following best practices, the layout doesn't adjust correctly on various screen resolutions and compatibility issues arise with legacy browsers.
1. The grid layout doesn't adjust properly on small screens.
2. Items overflow the container when the content is too large.
3. Compatibility issues with older versions of Internet Explorer.
Below is the problematic code:
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
}

.item {
background-color: lightgray;
padding: 20px;
font-size: 1rem;
}

@supports not (display: grid) {
.container {
display: block;
}

.item {
margin-bottom: 20px;
}
}