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). 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:
.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:
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
auto-fill
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!
Top comments (0)