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

aside侧边栏不自动撑开的根本原因是其无默认宽高，仅按内容撑开；在flex/grid布局中需显式设置宽度或flex属性，推荐用CSSGrid配合fr单位和minmax()实现响应式两栏布局。

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

混用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问题。

justify-items控制网格项行内轴（水平）对齐，align-items控制块轴（垂直）对齐；均作用于容器，可被justify-self/align-self覆盖；取值为start/end/ce...

浮动元素脱离文档流导致布局塌陷，应给受干扰的后续元素（如页脚）设clear:both；更优方案是父容器触发BFC（如display:flow-root）或直接采用Flex/Grid布局。