DEV Community
·
网格基础：轨道大小
💡
原文英文，约600词，阅读约需3分钟。
📝
内容提要
网格布局通过display: grid将容器分为行和列，可以设置列和行的大小，使用fr单位和minmax()限制大小，内容大小影响min-content和max-content。repeat()函数可重复设置相同大小，auto-fill和auto-fit可自动调整列数以避免溢出。
🎯
关键要点
- 网格布局通过display: grid将容器分为行和列。
- 可以设置列和行的大小，使用fr单位和minmax()限制大小。
- 内容大小影响min-content和max-content。
- repeat()函数可重复设置相同大小。
- auto-fill和auto-fit可自动调整列数以避免溢出。
- fr单位根据容器的可用空间确定最终宽度。
- minmax(min, max)语句可限制列或行的宽度。
- min-content、max-content和auto值基于子元素的内容大小。
- fit-content(argument)类似于minmax(auto, min(argument, max-content))。
- 使用repeat()函数可以轻松设置多个列或行的相同大小。
- auto-fill会创建尽可能多的列，即使它们是空的。
- auto-fit只会创建所需的列。
🏷️
标签
➡️
