CSS Grid not aligning items correctly in different screen sizes with Bootstrap 5
I can't seem to get I'm currently working on a responsive layout using CSS Grid alongside Bootstrap 5, but I'm working with issues with items not aligning as expected when resizing the browser window. Initially, I defined a grid with three columns, and the layout looks good on larger screens. However, when I switch to a smaller screen, the items overlap or create unwanted gaps. I've tried using media queries to adjust the grid-template-columns, but the items still don't rearrange properly. Here’s a snippet of my CSS: ```css .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 768px) { .container { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .container { grid-template-columns: 1fr; } } ``` And my HTML looks like this: ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div> ``` When the screen size is reduced, the layout shifts unpredictably instead of stacking neatly. I've checked for Bootstrap's utility classes that might be conflicting with my grid styles, but nothing seems to work. Also, I'm not seeing any console errors related to this behavior. Any tips on how to ensure that the grid items rearrange correctly across different screen sizes would be greatly appreciated! My team is using Css for this application. Has anyone else encountered this?