CodePark/ questions / Grid
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Grid

The container is 1000px wide with no gap and holds only two items. How wide is each item?

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

500px is right. auto-fit and auto-fill both create as many tracks of at least 200px as fit. Here that is five. auto-fit then collapses the empty tracks to zero width. So the two items share the full width, at 500px each.

200px is the tempting wrong answer. That is what auto-fill gives: it keeps the empty tracks, so each item stays 200px.