Grid fixed values

Suppose we have a grid layout with an aside and a main. The CSS looks like this:

.wrapper {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1rem;
}

aside

main

This will cause overflow on smaller viewport sizes due to lack of space. To avoid such issues, always use media queries when using CSS grid as above.

On smaller viewport sizes, wrap and on larger viewport sizes, use grid layout.

@media (min-width: 600px) {
  .wrapper {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1rem;
  }
}

aside

main

Resize the browser window to see the effect.