The CSS fit-content property is an inbuilt property in CSS. This property is used to adjust the size according to this formula min(maximum size, max(minimum size, argument)). The fit-content() property use to defined function to put a limit on the maximum size of the division. This formula is very helpful while dealing with CSS grids. However, it must be kept in mind that fit-content() is not compatible with Internet Explorer on PC. Different CSS units can be used in this formula. The fit-content() function accepts length and percentage as arguments.
fit-content: length | percentage
- length: This property value containe the fixed length.
Units: Absolute Lengths
- percentage: This property value containe the relative length depends on available space in the given axis.
Units: Relative Length
Below example illustrate the CSS fit-content property:
Example: It can be seen that the webpage is divided into four grid columns. The maximum permissible width of the first, second and third division is 150px, 250px, and 350px respectively, whereas the fourth division’s width has been set to 1.5fr. This means that it will adjust itself according to the device width and the width occupied by the other three divisions.
Explanation: Let’s have a look at the example stepwise.
- Step 01: Normal Layout, the normal webpage layout. CSS Grid is used for the demonstration purpose. CSS Grid helps in creating responsive webpages, as the grid divisions adjust according to the screen width.
- Step 02: Screen width starts to decrease. The fourth division has started to shrink, however, the first, second and third division remains unaffected.
- Step 03: Minimum Width, the third division has shrunk the most. The content inside the first and the second division have adjusted themselves in such a way that they do not get overflow. The grid is responding well to the screen width change.
- Step 04: Screen width starts to increase. Now the screen width has been increased, and the width of all the divisions has increased accordingly. However, an upper limit on the width of the first, second and third division was set, and thus after limiting that threshold limit, they will get fixed. The fourth division, however, will keep on expanding.
- Step 05: Back to normal layout the grid has been reinstated to the normal layout.
From steps 02, 03, and 04, it can be observed that once the screen width started to reduce, the fourth division was the first to shrink. Once the width started to increase, all the divisions started to expand, however, the first division stopped expanding after the width became equal to 150px, while the second and the third one expanded until they reached the width of 250px and 350px respectively. The fourth division kept on expanding. This is because its width was set to 1.5fr, which means that its own width will depend on the width of the screen and the other divisions.