grid布局_新疆栾骏商贸有限公司

gap已取代grid-gap，是row-gap和column-gap的简写，支持单值（统一行列间距）和双值（分别设行、列间距），且在现代Grid和多行Flex中均适用，语法更简洁、语义更清晰。

浮动导致父容器高度塌陷引发后续模块重叠，需用clearfix（::after+display:table+clear:both）清除；overflow:hidden有裁剪风险；现代推荐flex或gri...

grid-template-areas配合图片时常见错位，主因是img未设width:100%和height:100%，需嵌套于命名区域容器中，并配合object-fit、overflow:hidde...

align-items控制网格项在交叉轴（列方向）的垂直对齐，justify-items控制主轴（行方向）的水平对齐；二者均作用于容器内所有网格项，但可被align-self/justify-self...

混用fr和%时，浏览器先按百分比固定列宽，再将剩余空间按fr比例分配；例如20%1fr2fr中，后两列实际占容器宽约26.67%和53.33%。

Grid布局完全支持卡片排列，留白源于grid-auto-flow:row的“顺序优先”策略，启用rowdense并配合弹性轨道（如repeat(auto-fill,minmax(200px,1fr)...

子容器嵌套后布局混乱，通常因某级父容器漏设display:grid；Grid不继承，子元素需显式声明display:grid才能成为新网格上下文并定义自身行列。

父元素高度塌陷是因浮动元素脱离文档流致父容器无法计算其高度；清除浮动需触发BFC或使用伪元素（如clearfix），而Flex/Grid布局天然避免该问题。

正确设置为grid-template-columns:repeat(auto-fit,minmax(300px,1fr)))，其中300px是卡片最小合理宽度，auto-fit确保列数动态适配容器宽度...

fr单位是剩余空间的分配份额，需容器有明确宽度才生效；推荐用minmax()配合auto-fit实现响应式分栏，避免隐式轨道陷阱及flex混用时的min-width问题。