全解析CSS Grid 的 auto-fill 和 auto-fit 内容自适应

相瑶

CSS  Grid 的 auto-fill 和 auto-fit

1. /* 父元素 */
2. .grid {
3. display: grid;
4. /* 定义「网格容器」里有多少列，以及每列的宽度 */
5. /* repeat 是个「重复函数」，表示后面的模式会被重复多次 */
6. /* auto-fit 是一个特殊值，自动根据容器宽度，能放下几个就放几个，每列都用后面的规则 */
7. /* minmax 也是一个函数，每列最小 200px，最大可以占 1fr（剩余空间的平分） */
8. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
9. }
10. /* 子元素 */
11. .item {
12. height: 200px;
13. background-color: rgb(141, 141, 255);
14. border-radius: 10px;
15. }

复制代码

auto-fill 和 auto-fit 区别

auto-fill：尽可能多地填充列，即使没有内容也会“占位”；

auto-fit：自动适应内容，能合并多余空列，不占位；

auto-fill 和 auto-fit 适用场景

希望每行有多少内容就撑多宽，用 auto-fit；（如：卡片式布局、相册等）

希望固定列数，有占位，用auto-fill；（如：表格、日历等）

到此这篇关于全解析CSS Grid 的 auto-fill 和 auto-fit 内容自适应的文章就介绍到这了,更多相关css grid 自适应内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章，希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！