html的flex布局gridlayout布局单元格宽度设置_CSSGrid⽹格布局
传统的flex布局是针对轴线的布局，也就是⼀维布局。虽然flex很⽅便，但是涉及到复杂的⼆维布局的时候就需要flex嵌套flex实现，相对⽐较⿇烦。刚好现在的浏览器内置⽀持Grid布局了，相⽐于传统的flex布局，Grid布局将容器划分为⾏和列，产⽣的单元格，然后指定项⽬所在的单元格，通过对row和column的设置，即可完成⼆维布局。对flex布局实现“降维打击”。
基本概念
布局的整体称为container，每个布局的⼦组件称为item，Grid布局就是相对于item来说的。row和column交叉的地⽅就是cell，划分cell 的线就是grid line，n⾏有n+1根⽹格线。
使⽤
1. 设置display: grid，或者设置display: inline-grid
2. 设置grid-template-columns，grid-template-rows
单位
⽤px，fr的话就相当于固定px之后剩下的部分（没有固定的px就直接分），auto表⽰交给浏览器决定。可以⽤repeat来批量实现⽹格布局，⽐如repeat(12, 1fr)就实现了12⽹格。可以使⽤minmax来设置⼀个区域的最⼩值和最⼤值，⽐如minmax(1fr,500px)，表⽰最⼩宽度是1fr，最⼤宽度是500px。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。