CSS | fit-content() Property

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 containe 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 containe 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Required meta tags -->
    <title>CSS | fit-content Propety</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>

chevron_right


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 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.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.