# CSS Grid

```CSS
.itemsContainer {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, 400px);
  justify-content: space-around;
}

@media (max-width: 500px) {
  .itemsContainer {
    grid-template-columns: none;
  }
}
```

[![2022-09-07-10_34_41.png](https://books.juannavas.dev/uploads/images/gallery/2022-09/scaled-840-/0MBhxks0vVCisFLq-2022-09-07-10_34_41.png)](https://books.juannavas.dev/uploads/images/gallery/2022-09/0MBhxks0vVCisFLq-2022-09-07-10_34_41.png)

[![2022-09-07-10_36_27.png](https://books.juannavas.dev/uploads/images/gallery/2022-09/scaled-840-/jZvNkB8rdRLHDg29-2022-09-07-10_36_27.png)](https://books.juannavas.dev/uploads/images/gallery/2022-09/jZvNkB8rdRLHDg29-2022-09-07-10_36_27.png)