使用fr单位、minmax()、repeat()和auto实现Grid自适应布局，通过1fr 2fr比例分配、minmax设置弹性范围、repeat结合auto-fit自动换行，以及auto/min-content/max-content控制行高，使网格随内容与屏幕尺寸灵活调整。
在使用 CSS Grid 布局时，实现行高列宽的自适应是构建响应式页面的关键。核心在于合理使用 fr 单位、minmax()、auto 和 repeat() 等特性，让网格容器根据内容或可用空间自动调整。
fr（fraction）单位表示网格容器中剩余可用空间的份数，非常适合创建等比分布的列或行。
• 例如：
grid-template-columns: 1fr 2fr 表示第一列占 1/3 宽度，第二列占 2/3。minmax(0, 1fr) 可防止内容溢出，增强自适应性。
使用 minmax(min, max) 可为列宽或行高设置最小和最大范围，让布局更灵活。
•minmax(100px, 1fr)：列宽最小 100px，最大可伸展至 1fr。minmax(auto, 300px)：高度随内容自适应，但不超过 300px。通过 repeat() 搭配 auto-fit 或 auto-fill，可让网格项自动换行并填满容器。
立即学习“前端免费学习笔记（深入）”；
•
repeat(auto-fit, minmax(200px, 1fr))：每项至少 200px，超出则换行，剩余项拉伸填满。行高可根据内容自动调整，无需固定 height。
•grid-template-rows: auto：行高由内容决定。min-content：行高为内容最小高度（如换行后）。max-content：行高为内容最大高度（如不换行所需高度）。grid-template-rows: min-content 1fr，首行紧凑，其余区域填充剩余空间。
基本上就这些。掌握 fr、minmax、auto-fit 和内容相关关键字的搭配，就能让 Grid 布局在不同屏幕和内容下自然伸缩，真正实现自适应。不复杂但容易忽略细节，比如忘记设 min-width: 0 导致项目不收缩，注意即可。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
570
收藏
