I am currently in the process of creating a layout that mirrors the one shown in the attached screenshot. To accomplish this, I have chosen to utilize CSS Grid for its simplicity and adaptability.
However, I have come across a difficulty. I desire for each box to automatically adjust its height based on its content, without impacting the heights of other boxes within the same row. Presently, when one box increases in height due to its content, it alters the heights of all other boxes in the row.
Is there a method to achieve the desired behavior without compromising the responsiveness of the layout? If CSS Grid cannot fulfill this, would you suggest an alternative approach that aligns better with my requirements?
* {
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;
}<div class="parent-container">
<div class="box">**Lorem ipsum 200**
</div>
<div class="box">Item 2</div>
<div class="box">Item 3</div>
<div class="box">Item 4</div>
<div class="box">Item 5</div>
<div class="box">Item 6</div>
<div class="box">Item 7</div>
<div class="box">Item 8</div>
<div class="box">Item 9</div>
<div class="box">Item 10</div>
<div class="box">Item 11</div>
<div class="box">Item 12</div>
<div class="box">Item 13</div>
<div class="box">Item 14</div>
<div class="box">Item 15</div>
<div class="box">Item 16</div>
<div class="box">Item 17</div>
<div class="box">Item 18</div>
<div class="box">Item 19</div>
<div class="box">Item 20</div>
</div>