Minimum Content Size In CSS Grid

Minimum content size for grid layout: CSS grid items have a default minimum content size, which is auto. This means that if there is an element that is larger than the grid item, it will overflow.

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

gridboxgridbox

Because the content in the left column is too wide, it is larger than the remaining content space, resulting in content overflow.

To solve this problem, we have three different solutions:

1. Use min-width: 0 in the grid item

2. Use minmax()

3. Use overflow: hidden in the grid item

As a defensive CSS strategy, it doesn't matter which solution you choose to use, as long as it solves the problem.

Here, we choose min-width: 0

gridboxgridbox