CSS 函数 - fit-content()

该 CSS 函数 fit-content() 使用公式 min(最大尺寸, max(最小尺寸, 参数)) 来限制给定尺寸在一个由最小和最大尺寸确定的范围内。

在 CSS 网格中，fit-content() 函数可用作轨道尺寸。

在这种情况下，它使用 auto 来确定 最小尺寸 和 max-content 来确定最大尺寸，这类似于计算 minmax(auto, max-content)。
fit-content() 函数充当 width、height、min-width、min-height、max-width 和 max-height 的盒子尺寸指定符。

在此用法中，最大和最小尺寸由内容的尺寸确定。

可能的值

参数 <length> 和 <percentage> 可以传递给 fit-content() 函数。

<length> - 绝对长度。
<percentage> - 在给定的轴上，百分比相对于可用空间计算。

它与网格容器中行轨道的块级尺寸和列轨道的内联尺寸相关。

在网格参数之外，它取决于书写模式以及已布局盒子的可用内联或块级尺寸。

语法

fit-content: length | percentage

CSS fit-content() - <length> 值

在以下示例中，grid-template-columns 被赋予 CSS 属性 fit-content()，这使得列能够根据内容调整大小，并在 #custom-container 网格内的每列中设置最大宽度。

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

在以下示例中，CSS 属性 fit-content() 应用于 #custom-container 的 grid-template-columns。

它指定列宽度的百分比，使列能够根据容器宽度的相对百分比动态调整大小，最后一列 (1.2fr) 占据剩余的空间。

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

打印页面