<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> 讯享网
网格布局（Grid）是将网页划分成一个个网格单元，可任意组合不同的网格，轻松实现各种布局效果，也是目前CSS中最强大布局方案，比Flex更强大。
容器和项目
当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid（设成行内元素） 后，它就变成了一个网格容器（container），这个元素的所有直系子元素将成为网格元素，称为项目（item）。
讯享网
设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align等设置都将失效。
行和列
容器里面的水平区域称为“行”（row），垂直区域称为“列”（column）。
网格线
单元格
行和列的交叉区域，称为“单元格”（cell）。 正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。
图示中绿的背景为4个单元格，单元格各自有一个项目item。
注意：需要区分单元格和项目元素，比如一个3*3的九宫格，项目元素不一定就是9个，项目元素个数由开发者决定。
grid-template-columns、 grid-template-rows
- 属性定义每一列的列宽
- 属性定义每一行的行高
- 固定值 px
- 百分比 %
讯享网
- repeat()
重复写同样的值非常麻烦，尤其网格很多时。可以使用repeat()函数，简化重复的值。
将上面的代码用改写如下：
接受两个参数
- 参数一：重复的次数（上例分别是列为4，行为2）
- 参数二：重复的值。
重复某种模式也是可以的。
讯享网
上述代码是将列宽为40px、60px、80px重复2次；行高2行，等分容器的高度。
- fr
为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为“片段”）。
同时，fr可以与绝对长度的单位结合使用，这时会非常方便。
讯享网
上面代码表示，第二列的宽度为固定的100px，第三列的宽度是第一列的2倍。
- minmax()
函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
上面代码表示，第三列的宽度不小于100px，不大于1fr。
6. auto
关键字表示由浏览器自己决定长度。
讯享网
上面代码中，第二列的宽度为容器宽度除第一、第三列的总宽度外所占最大的宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。
- auto-fill、auto-fit
与 直译为 自适应 与 自填充，一般用来实现自适应布局的。
auto-fill：
If the grid container has a definite or maximal size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container.
如果网格容器在相关轴上具有确定的大小或最大大小，则重复次数是最大可能的正整数，不会导致网格溢出其网格容器。
讯享网
auto-fit：
Behaves the same as , except that after placing the grid items any empty repeated tracks are collapsed。
行为与 auto-fill 相同，除了放置网格项目后，所有空的重复轨道都将消失。简单来说，就是如果元素数量不够放满一行，则 auto-fit 会将元素平铺，铺满一行。
- 网格线名称
属性和属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。
讯享网
上述代码表示 3*3 的九宫格，4根垂直的网格线的名称分别是c1、c2、c3、c4；4根水平的网格线名称分别是：r1、r2、r3、r4。
同时网格布局允许同一根线有多个名字，比如：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/207091.html