CSS Function- fit-content()

The CSS function fit-content() uses the formula min(maximum size, max(minimum size, argument)) to restrict a given size inside a range determined by a minimum and maximum size.

  • In CSS Grid, the fit-content() function may be used as a track size.

    In this case, it uses auto to determine the minimum size and max-content to establish the maximum size, which is computed similarly to minmax(auto, max-content).

  • The fit-content() function acts as a box size specifier for width, height, min-width, min-height, max-width, and max-height.

    The maximum and minimum sizes in this usage are determined by the size of the content.

Possible Values

The parameters <length> and <percentage> can be passed to the fit-content() function.

  • <length> - An absolute length.

  • <percentage> - On a given axis, the percentage is computed with respect to the available space.

    It is related to the block size for row tracks and the inline size for column tracks inside the grid container in the grid attributes.

    Outside of grid parameters, it depends on the writing mode and the available inline or block size of the laid-out box.

Syntax

fit-content: length | percentage

CSS fit-content() - <length> Value

In the following example, the grid-template-columns are given the CSS property fit-content(), which enables the columns to resize according to the content, with maximum widths set for each column inside the #custom-container grid.

<html>
<head>
<style>
   #custom-container {
      display: grid;
      grid-template-columns: fit-content(200px) fit-content(400px) fit-content(200px);
      grid-gap: 10px;
      box-sizing: border-box;
      height: 250px;
      width: 80%;
      margin: 20px auto;
      background-color: #c43b31;
      padding: 20px;
   }
   #custom-container > div {
      background-color: #ffd700;
      padding: 15px;
   }
</style>
</head>
<body>
<div id="custom-container">
<div>Unique Item</div>
<div>A longer description goes here. It might contain more details and interesting information that extends beyond the usual width.</div>
<div>Adaptable Element</div>
</div>
</body>
</html>

CSS fit-content() - <percentage> Value

In the following example the CSS property fit-content() is applied in the grid-template-columns of the #custom-container.

It specifies percentages for column widths, enabling the columns to dynamically resize according to a relative percentage of the container's width, with the final column (1.2fr) occupying the remaining space.

<html>
<head>
<style>
   #custom-container {
      display: grid;
      grid-template-columns: fit-content(20%) fit-content(30%) fit-content(40px) 1.2fr;
      grid-gap: 15px;
      box-sizing: border-box;
      height: 40%;
      width: 100%;
      background-color: #7b4a93;
      padding: 15px;
      }
   .custom-box {
      background-color: #ecf0f1;
      padding: 8px;
   }
</style>
</head>
<body>
<div id="custom-container">
   <div class="custom-box">
   Explore new ideas within  width.</div>
   <div class="custom-box">
   Dive into content-rich experiences up to 280px.</div>
   <div class="custom-box">
   <b>Immerse in knowledge.</b>
   Learn about various topics from science to art.</div>
   <div class="custom-box">
   Responsive to screen size and other divisions' width.</div>
</div>
</body>
</html>
Advertisements