Responsive layout with 3 items per row on larger screens and 1 item per row on smaller screens

Question

I want to position 3 items of equal width in a single row on larger screens, stretching items to fill the available space.

However when the items are less than 200px wide I want to display them all in single column.

I never want to have 2 items per row. Any plain CSS solution such as CSS flexbox or CSS grid is acceptable.

The following code is incorrect because it will sometimes show 2 items per row.

.item {
  height: 200px;
  background-color: blue;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
}

user_14769063 · Answer

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;

}
        
.item {
background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

        
@media (max-width: 992px) {
    .container {  grid-template-columns: auto;}
}

user_14768295 · Answer

.item {
  height: 200px;
  background-color: blue;
}

.container {
  display: grid;
  grid-template: 1fr 1fr 1fr / repeat(200px, minmax(200px, 1fr));
  grid-gap: 1rem;
}

.grids {
  background-color: red;
}

Responsive layout with 3 items per row on larger screens and 1 item per row on smaller screens

2 Answers