CSS网格函数fit-content()的使用

小半 • 2024年2月29日下午3:23 • 前端开发 • 阅读 442

CSS函数fit-content()属于网格函数，除此之外的网格函数还有：minmax()、repeat()。顾名思义，这三个函数只能在网格布局中使用。fit-content()函数主要是用于给定布局可用大小，适应内容，其功能等同于：min(maximum size, max(minimum size, argument))。函数格式如下：

/* <length> values */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/* <percentage> value */
fit-content(40%)

fit-content()接收一个参数，可以是长度值或者是百分比值，当为长度值时支持各种格式的固定长度，如：px、cm、vw、ch等。当参数为百分比值，相对于给定轴中可用空间的百分比。在网格属性中，它与列轨道中网格容器的内联大小和行轨道中网格容器的块大小相关。否则，它与布局框的可用内联大小或块大小相关，具体取决于书写模式。

浏览器兼容性

使用示例

如下通过示例来理解fit-content()函数具体的使用方式和布局配置理解。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>fit-content函数实现内容自适应示例</title>

    <style>
        #container {
            display: grid;
            grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
            grid-gap: 5px;
            box-sizing: border-box;
            height: 200px;
            width: 100%;
            background-color: #8cffa0;
            padding: 10px;
        }

        #container>div {
            background-color: #8ca0ff;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div id="container">
        <div>与内容等宽.</div>
        <div>
            根据给定内容，当内容小于300px，则宽度与内容等宽，当内容大于300px，则宽度为300px.
        </div>
        <div>弹性宽度</div>
    </div>

</body>

</html>