I have been working on creating a responsive web page where the "boxes" automatically adjust to a new row when the browser window is resized. To achieve this, I utilized the following CSS code:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
You can view the desired behavior in action in the pen linked below.
https://codepen.io/DukeJellington/pen/BrMQga
The example below demonstrates how icons and text wrap to the next row as the window size decreases, maintaining a clean layout.
However, there seems to be an issue preventing this wrapping behavior in my full-page setup; unfortunately, I cannot pinpoint what might be causing it.
https://codepen.io/DukeJellington/pen/vRbyqb
If you take a look at the second link, when the window size is reduced, the final div wraps to the next row appropriately, but the other grid items stubbornly remain on the same row. This problem only occurs with the specific styling of the wrapper class.
After some troubleshooting, I discovered that by removing the following CSS properties from the wrapper class, the grid items behave correctly:
.wrapper {
display: grid;
grid-gap: 20px;
If anyone has insights into why having the grid display for the wrapper class is impacting the proper alignment of my grid items, your input would be greatly appreciated!