Grid网格布局笔记

最新推荐文章于 2024-04-02 23:59:19 发布

kun_96

最新推荐文章于 2024-04-02 23:59:19 发布

阅读量357

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/kun_96/article/details/106464957

版权

本文是关于CSS Grid网格布局的笔记，对比了传统布局、flex布局和grid布局的优缺点。重点介绍了grid的容器属性，如grid-template-columns、grid-template-rows等，以及项目属性，如grid-column-start、grid-row-end等。尽管grid布局兼容性目前稍逊于flex，但其强大的布局能力使其成为现代网页设计的重要工具。

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

Grid网格布局笔记

常用的三种布局方式对比
1.传统布局方式
利用position属性 + display属性 + float属性布局，兼容性最好，但是效率低，麻烦！
2.flex布局
有自己的一套属性，效率高，学习成本低，兼容性强！
3.grid布局
网格布局（Grid）是最强大的 CSS 布局方案。但是知识点较多，目前的兼容性不如flex好！

容器属性

1.grid-template-columns

2.grid-template-rows

a. 想要多少行或者列，就填写相应属性值的个数
如
grid-template-columns: 100px 100px 100px;

b. repeat()，第一个参数是重复的次数，第二个参数是所要重复的值
如
grid-template-columns: repeat(3, 100px);

c. auto-fill，有时，单元格的大小是固定的，但是容器的大小不确定，这个属性可以自动填充
如
grid-template-columns: repeat(auto-fill, 100px);

d. fr关键字（fraction 的缩写，意为"片段"）
如
grid-template-columns: repeat(4, 1fr); //宽度平均分成4份
e.  minmax()，长度范围，最小值和最大值
如
grid-template-columns: 1fr minmax(150px, 1fr);

f.  auto，由浏览器自己决定长度
如
grid-template-columns: 100