Responsive Multi-Column Layout with Dynamic Content Height using CSS Grid

/* HTML Structure for context:
<div class="grid-container">
    <div class="grid-item item-1">Short content.</div>
    <div class="grid-item item-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="grid-item item-3">Medium content example.</div>
    <div class="grid-item item-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="grid-item item-5">Another short piece.</div>
</div>
*/

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive columns */
    grid-auto-rows: minmax(100px, auto); /* Flexible row height, starts at 100px, expands as needed */
    gap: 20px;
    padding: 20px;
    background-color: #f0f0f0;
}

.grid-item {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex; /* Optional: for content alignment within item */
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

/* Example: Make specific items span more rows based on content/design need */
.grid-item.item-2 {
    grid-row: span 2; /* This item will try to span 2 implicit rows */
}

.grid-item.item-4 {
    grid-row: span 3; /* This item will try to span 3 implicit rows */
}

/* Media query to adjust column count on smaller screens */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (max-width: 480px) {
    .grid-container {
        grid-template-columns: 1fr; /* Single column on very small screens */
        grid-auto-rows: auto; /* Let rows auto-size completely */
    }
    .grid-item.item-2,
    .grid-item.item-4 {
        grid-row: span 1; /* Reset row span for single column view */
    }
}