Grid网格布局

最新推荐文章于 2024-07-12 15:00:58 发布

m0_70646869

最新推荐文章于 2024-07-12 15:00:58 发布

阅读量228

点赞数

分类专栏： Web前端文章标签：经验分享前端前端框架

本文链接：https://blog.csdn.net/m0_70646869/article/details/124685397

版权

本文详细介绍了CSS Grid布局中的关键属性，如grid-template-columns和grid-template-rows用于定义列宽和行高，如何使用repeat()和fr单位进行灵活布局。同时，文章探讨了auto、minmax()等规则的应用，以及grid-gap、grid-template-areas和grid-auto-flow等属性在创建网格布局时的作用。此外，还提及了对齐和自动填充的相关属性，如align-items、justify-content等，帮助读者全面掌握Grid布局技巧。

摘要由CSDN通过智能技术生成

                    
grid-template-columns：定义每一列的列宽
 
 可以使用repeat()
 
 repeat(3, 33.33%)，定义三列，每一列为33.33%宽  
 
 repeat(2, 100px 20px 80px)，定义了六列，第1列和第4列为100px，第二列和第5列为20px…  
 
 repeat(auto-fill, 100px)，表示不固定大小的容器，希望一行尽量放慢项目，每个项目为100px
 
 还可以使用fr，比例关系，100px 1fr 2fr，第一列为100px，剩余部分分为3份，第二列占2份，第三列占1份。
 
 1fr 1fr minmax(100px, 1fr)，容器宽度为280px时，此时三列每个都100px，则不够，所以就最后一个为100px，剩余部分前两个平分；
 
 1fr  **《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源	徽信搜索公众号【编程进阶路】** 1fr minmax(100px, 200px)如果容器宽度为400px时&#