全解析CSS Grid 的 auto-fill 和 auto-fit 内容自适应
发布时间：2025-05-08 14:48:13 作者：xixixin_ 
我要评论
我要评论这篇文章主要介绍了全解析CSS Grid 的 auto-fill 和 auto-fit 内容自适应的相关资料，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
CSS Grid 的 auto-fill 和 auto-fit
/* 父元素 */
.grid {
display: grid;
/* 定义「网格容器」里有多少列，以及每列的宽度 */
/* repeat 是个「重复函数」，表示后面的模式会被重复多次 */
/* auto-fit 是一个特殊值，自动根据容器宽度，能放下几个就放几个，每列都用后面的规则 */
/* minmax 也是一个函数，每列最小 200px，最大可以占 1fr（剩余空间的平分） */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* 子元素 */
.item {
height: 200px;
background-color: rgb(141, 141, 255);
border-radius: 10px;
}auto-fill 和 auto-fit 区别
auto-fill：尽可能多地填充列，即使没有内容也会“占位”；
auto-fit：自动适应内容，能合并多余空列，不占位；
auto-fill 和 auto-fit 适用场景
希望每行有多少内容就撑多宽，用 auto-fit；（如：卡片式布局、相册等）
希望固定列数，有占位，用auto-fill；（如：表格、日历等）
到此这篇关于全解析CSS Grid 的 auto-fill 和 auto-fit 内容自适应的文章就介绍到这了,更多相关css grid 自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
- CSS Grid 是一种二维布局系统，可以同时控制行和列，相比 Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,这篇文章主要介绍了前端CSS Grid 布局详解,需要的朋2025-04-16
CSS Grid布局是一种二维布局系统,可以创建复杂的网页布局,它通过行和列来定义网格,并允许项目跨越多个网格单元,Grid布局提供了多种属性来控制网格的大小、间距和项目的位置2025-01-14- 文章主要探讨了CSS Grid布局在Internet Explorer（IE）中的不兼容问题,并提供了具体的解决方案和最佳实践,文章首先介绍了CSS Grid布局的基本概念和与传统布局方法的区别,然2024-11-08
CSS合并单元格四种方式示例详解(table/display/flex/grid)
这篇文章主要介绍了CSS合并单元格四种方式：table/display/flex/grid,table布局仍是实现合并单元格最简单的方式，grid次之，flex再次，display:table不推荐，本文结合实例2024-02-28
本文我们将深入探讨css中flexbox和grid的布局,通过了解他们的主要差异，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面2023-11-20
本文主要介绍了CSS使用Flex和Grid布局实现3D骰子，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学2022-08-01
这篇文章主要介绍了CSS中使用grid布局实现一套模板多种布局,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-11
这篇文章主要介绍了用CSS Grid布局制作一个响应式柱状图的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编2020-05-26
这篇文章主要介绍了解析CSS中的Grid布局完全指南的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2019-04-09
这篇文章主要介绍了css中grid属性的使用详解的相关资料，详细的介绍了grid属性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-26
最新评论