DEV Community

Cover image for The magic of auto-fit and auto-fill (and the difference between them)
Mahbubur Rahman
Mahbubur Rahman

Posted on

The magic of auto-fit and auto-fill (and the difference between them)

video


.grid {
  display: grid;
  gap: var(--gap, 1rem);
  grid-template-columns: repeat(
    var(--grid-type, auto-fit),
    minmax(min(180px, 100%), 1fr)
  );
  grid-auto-rows: 120px auto auto;
  container-type: inline-size;
}

Enter fullscreen mode Exit fullscreen mode

https://codepen.io/kevinpowell/pen/yyLYoZO

https://www.youtube.com/watch?v=OZ6qKoq7RJU

Top comments (0)