grid网格布局，如何理解grid-template属性的fit-content函数？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

grid网格布局，确实是颠覆以往的css布局认知。虽然css可以调用函数，但是事实上大家也基本上没用过。但是，grid布局就自带了好几个专用函数和专用常量。本文中对专用于grid布局的fit-content()函数做一下简单的讨论。

大家好，这里是苏南大叔的程序如此灵动博客，记录苏南大叔和计算机代码的故事。本文测试环境：win10，chrome。本文主角是grid布局的专用函数fit-content()。

测试代码

<style>
  #box {
    display: grid;
    grid-template-columns: fit-content(220px) fit-content(220px) 1fr;
    grid-gap: 5px;
    height: 220px;
    width: 100%;
  }
  #box > div {
    background-color: #ffd000;
  }
</style>
<div id="box">
  <div>内容需要的宽度<br/>比220px少的话，<br/>取max-content<br/></div>
  <div>如果比220px大的话，就按照220px设置。<br/>[max-content,220px]</div>
  <div>弹性宽度</div>
</div>

max-content

这里先回顾一个概念max-content，有助于本文的理解。参考文章：

• https://newsn.net/say/grid-minmax.html

max-content指的是内部内容能撑起的最大宽度，它与本文中的fit-content()里面的宽度概念是有相似之处。

fit-content()函数

苏南大叔对这个函数fit-content(参数1)做个通俗的比喻，就是最合身的衣服。给内容提供一个最合适的宽度（或高度）。格子的宽度是适用于内容的，但是又不会过大的适应内容，设定了一个最大尺寸。

fit-content()函数的参数只支持数值和百分比值，不接受fr值。

改名叫set-max-width()是不是更好啊？尺寸区间就是[max-content,参数1]。

相关文章

• https://newsn.net/say/css-grid.html
• https://newsn.net/say/grid-auto-flow.html
• https://newsn.net/say/grid-auto-flow-dense.html
• https://newsn.net/say/grid-template.html
• https://newsn.net/say/grid-template-areas.html
• https://newsn.net/say/grid-minmax.html
• https://newsn.net/say/grid-row.html
• https://newsn.net/say/grid-zindex.html
• https://newsn.net/say/grid-template-2.html

总结

css相关文章汇总链接：

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。