I am designing a simple horizontal scrollable grid. Requirement is to have at max 2 rows. If the cells fit in one row, it should show one row else show wrap remaining items in next row. Is this possible with grid or do I have to go with flex.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, 162px);
grid-template-rows: repeat(2, 162px);
grid-auto-flow: column;
grid-auto-columns: 162px;
gap: 8px;
overflow-x: auto;
padding: 8px;
}
.grid-item {
background-color: #ccc;
}Example # 1 (If they fit in one row, it shouldn't wrap like this.)
<div class="grid-container">
<!-- Example grid items -->
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
Example # 2
<div class="grid-container">
<!-- Example grid items -->
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
<div class="grid-item">Item 7</div>
<div class="grid-item">Item 8</div>
<div class="grid-item">Item 9</div>
<div class="grid-item">Item 0</div>
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
<div class="grid-item">Item 7</div>
<div class="grid-item">Item 8</div>
<div class="grid-item">Item 9</div>
<div class="grid-item">Item 0</div>
</div>Problem: Grid in red looks fine because it has more no of cells, so it wraps to second row, but grid in yellow has less items but still wraps in second row.
