What is the difference between auto-fill and auto-fit in CSS?

CSS grid

Prior to the existence of the CSS grid, developers leveraged several options such as floats, element positioning, and so on. However, this wasn't sustainable enough to create flexible layouts that respond to different screen sizes. Therefore, they resorted to designing fixed layouts. With CSS grid, developers can conveniently align page content into rows and columns in an orderly and manageable fashion; thereby, enabling them to easily create flexible layouts that respond to changes in the view port size.

In designing complex websites and applications with numerous content, the CSS grid provides a way to repeatedly and automatically insert page content to produce different designs. This limits the lines of code we write and saves us time and stress.

In the CSS grid, there are two values that enable developers to automatically insert page content into layouts: auto-fit and auto-fill. Learning the difference between these values will enable us to reasonably choose the automatic keyword value to design layouts based on the page content.

The repeat() function

The repeat() function is a CSS function that allows us to repeat a value or set of values for multiple columns and rows in a grid. The repeat() function helps us to reduce the lines of code. Instead of writing out a certain value or set of values multiple times to specify multiple columns and rows, we can explicitly state the number of times we want.

The repeat() function can be used with two grid properties—grid-template-columns and grid-template-rows.

Syntax

The repeat() function has two parameters: repeat-count and track-list.

• Repeat-count: This allows us to specify the number of repetitions we want to make for a given value or set of values. The repeat count can be stated using an integer value or the automatic repeat. The automatic repeat can be specified using two values—auto-fit and auto-fill.
• Track-list: this allows us to explicitly state the value or set of values to be repeated. The stated value(s) specifies the width or height of column(s) or row(s) we want to repeat in a grid. The stated values can be in pixels (px), a fraction (fr) or percentage (%).

A CSS function called the minmax() function, allows us to specify the size range of a grid item. It can be used within the repeat() function.

The minmax()function

The minmax() function states the size range of a grid item and it allows a grid item to change size within the stated size range. This makes the grid item responsive. The minmax() function takes two parameters—min and max.

Syntax

• Min size: The min parameter specifies the minimal size of a grid item. It states that the grid item shouldn't change sizes less than the stated minimal size (when the grid container reduces in size).
• Max size: The max parameter specifies the maximal size of a grid item. By default, a grid item assumes its maximal size.

The auto-fill keyword

The auto-fill keyword automatically inserts multiple columns and rows into a grid container, until it completely fills the entire size of the grid container. This means that even after exhausting the stated grid items in the code, the auto-fill keyword continues to fill the grid container with empty columns to occupy its entire size. The number of columns or rows inserted into the grid container depends on the size of the grid container and the stated size of the columns and row.

• Usage: The auto-fill keyword should be used when we want to automatically fill the grid container with grid items. It is advisable to use auto-fill when we are sure that the available grid items will completely fill the grid container at the widest viewport to avoid any additional empty column(s).

Note: The auto-fill and auto-fit keywords should be used alongside the minmax() function, to properly see its effect and to ensure the responsiveness of web pages.

Example

Explanation

• Lines 9–14: We style the first div element as a grid container—this transforms its children into grid items—with a width of 100% and a blue border of 2px. It was styled to have multiple columns using the repeat() function. The repeat() function was given an auto-fill keyword and a minmax() function having 100px as its minimal size and 1fr as its maximal size.
• Lines 15–19: We give the seven grid items an explicit height of 100px, margin at all sides (top, right, bottom and left) and background color of green.
• Line 23: We create a div element with an ID of the container.
• Lines 24–30: We create seven div elements within the first div element and each of them were given an ID with a unique name.

The auto-fit keyword

The auto-fit keyword automatically inserts columns and rows into a grid container but when the grid items in our code cannot occupy the entire row width of the container, the auto-fit keyword stretches (instead of adding empty tracks) each grid item to entirely fit its available space.

Example:

Explanation

• Lines 9–4: We style the first div element as a grid container. This transforms its children into grid items—with a width of 100% and a blue border of 2px. It was styled to have multiple columns using the repeat() function. The repeat() function was given an auto-fit keyword and a minmax() function having 150px as its minimal size and 1fr as its maximal size.
• Lines 15–19: We give the seven grid items an explicit height of 100px, margin at all sides (top, right, bottom, and left), and background color of green.
• Line 23: We create a div element with an ID of "container."
• Lines 24–30: We create the seven div elements within the first div element, and each of them were given an ID with a unique name.

Differences between auto-fill and auto-fit

1. When the grid items stated in our code, it could not occupy the entire width of the grid container. So, auto-fill continually inserts empty columns of the same width and height as the stated grid items until the entire row width is occupied. auto-fit (on the other hand) does not insert empty columns into the row of the grid, instead, it stretches each grid item to completely fit into its entire width, without adding extra tracks.
2. When building web page layouts, the auto-fill creates a fixed grid layout while auto-fit creates a flexible grid layout. It stretches its grid items to occupy the row width of its parent container.

Conclusion

The auto-fit and auto-fill keyword values are just two of the handful of ways to automatically inser page content into layouts. Although, the two keyword values behave the same to an extent, there is a slight difference between them. Understanding the difference between them will enable us to preferentially choose between the two to create layouts based on the page content.