Horizontal scrollable grid in css with upto 2 rows

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;}

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.