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.
Syntax:
fit-content: length | percentage
Property values:
-
length: This property value contains the fixed length.
Units: Absolute Lengths- fit-content(8cm)
- fit-content(12mm)
- fit-content(8pc)
- fit-content(15px)
- fit-content(5pt)
-
percentage: This property value contains the relative length depends on available space in the given axis.
Units: Relative Length- fit-content(100%)
- fit-content(10em)
- fit-content(5rem)
- fit-content(2ch)
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.
<!DOCTYPE html><html lang="en">
<head>
<!-- Required meta tags -->
<title>CSS | fit-content Property</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<style>
#container {
display: grid;
grid-template-columns: fit-content(150px)
fit-content(250px)
fit-content(350px) 1.5fr;
grid-gap: 5px;
box-sizing: border-box;
height: 100%;
width: 100%;
background-color: #563d7c;
padding: 8px;
}
</style>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<div id="container">
<div style="background-color: whitesmoke;
padding: 5px">
The smallest division of the grid.
Maximum width is clamped to 150px.
</div>
<div style="background-color: whitesmoke;
padding: 5px">
This division's width will depend on
the content inside it. However, the
maximum width will be 250px.
</div>
<div style="background-color: whitesmoke;
padding: 5px">
<strong>
Division with some more data, however,
the maximum permissible width will be 350px.
</strong>
<br>
<br>
Web design encompasses many different skills
and disciplines in the production and maintenance
of websites. The different areas of web design
include web graphic design; interface design;
authoring, including standardized code and
proprietary software; user experience design;
and search engine optimization.
</div>
<div style="background-color: whitesmoke;
padding: 5px">
Flexible division, the width will change in
accordance with the screen size and the width
of the other three divisions.
</div>
</div>
</body>
</html>
|
Output:
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 divisions 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.
Supported Browser:
- Google Chrome
- Firefox
- Opera
- Safari