I hope you’re all doing well. I’m currently working on designing a layout similar to the one attached in the screenshot To achieve this, I’ve opted for CSS Grid for its ease of use and responsiveness.

However, I’ve encountered a challenge. I want each box to dynamically adjust its height based on its content, without affecting the heights of other boxes in the same row. Currently, when one box increases in height due to its content, it affects the heights of all other boxes in the row.

Is there a way to achieve the desired behavior without compromising the responsiveness of the layout? If not with CSS Grid, would you recommend a different approach that better suits my requirements?

Thank you in advance for your time and assistance. Any insights or suggestions would be greatly appreciated.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: blueviolet;
    padding: 5%;
}

.parent-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 2rem;
}

.box {
    background-color: aqua;
    min-height: 300px; 
}