I'm trying to create a responsive grid layout using Flexbox, but I'm facing an issue where gaps appear between boxes in different rows, depending on their height. The desired layout should resemble this structure (see image here)
I have implemented the following CSS for my Flexbox container and items:
.two-flexbox-container { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; align-content: center;}.two-flexbox-item { width: 100px; margin: 10px; border: 5px solid #89a896; background-color: #234243;}.flexbox-item-1 { min-height: 100px; }.flexbox-item-2 { min-height: 200px; }.flexbox-item-3 { min-height: 300px; }.flexbox-item-4 { min-height: 300px; }.flexbox-item-5 { min-height: 200px; }.flexbox-item-6 { min-height: 100px; }