The Dynamic CSS Grid Configuration Using Auto-fit and Auto-fill
Tags: css, webdev, frontend
Published: 2023-05-04 18:51:10

I was first exposed to CSS Grid through Bootstrap and ultimately got frustrated because it felt a little too "static". When I started focusing on learning to write my own CSS instead of using a framework, I revisited it a couple times and while I appreciated its simplicity, I still couldn't figure out how to make it flexible for different screen sizes without using excessive media queries.

Finally I decided to sit down and watch an entire deep-dive tutorial on YouTube ([this is the one I found](https://www.youtube.com/watch?v=EiNiSFIPIQE)). That's where I learned about the _auto-fit_ and _auto-fill_ keywords. They allow for the grid to automatically choose the number of columns in the grid depending on how many elements can fit on the screen based on a minimum and maximum size. 

## In Practice

The basic configuration looks something like this:

```CSS
.container {
  display: grid;
  grid-template-rows: 100px;
  grid-auto-rows: 100px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

.element {
  border: 2px dashed coral;
  background-color: lightseagreen;
}
```

Which results in:

![CSS Grid Resizing GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/563r3bel2c5azgwqtmup.gif)

The magic happens with the `grid-template-columns` property. In a more basic configuration you would define a number of columns by passing a number as the first argument of the `repeat` function. With the `auto-fit` keyword the number is dynamic, and is decided by how many elements can fix using the size defined by the `minmax` function.

In other words, an element can never get smaller than `100px` before it gets wrapped into the next row. The maximum is set as `1 fr` (a new css grid "fractional" unit), which means it's just the width of one whole column.

Lastly, the `grid-template-rows` just defines that the grid starts with one single row of `100px`, and `grid-auto-rows` defines that any rows that are automatically created by wrapping elements will have a height of `100px`. These can also be set to an `auto` value so that all elements in a row automatically take the height of the largest element in the row (which is a hard-to-accomplish shortcoming of Flexbox).

You can play around with the arguments of the `minmax` function and create very specific configurations, but otherwise that's all there is to it.

## `auto-fit` vs `auto-fill`

These two keywords do very similar things, which is only really relevant when there are not enough elements in the container to fill up every column.

`auto-fit` will only create enough columns for the number of elements whereas `auto-fill` will create a column even if it won't be filled by an element. The easiest way to understand this is visually:

## `auto-fit`

![CSS Grid Auto-fit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffnig50qf2766vkf8ne6.gif)

## `auto-fill`

![CSS Grid Auto-fill](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vndkgjonk2yd7p8jsmz.gif)

As you can see the elements in the `auto-fit` configuration will continue to get larger as the window expands even if there's room to fit another column.

## Conclusion

Using this configuration along with its flexibility for placing and overlapping elements mean that CSS Grid can replace flex-box for almost all display needs. Knowing how to set up a grid display configuration is a super powerful tool to have in your tool-belt.

As always, I'm new to front-end development and welcome any thoughts and feedback!