CSS中的网格布局（Grid Layout）网格自动布局算法详解 1. 网格自动布局算法概述 网格自动布局算法是CSS Grid布局的核心机制，用于自动计算未明确设置尺寸的网格轨道大小以及自动放置未指定位置的网格项目。当网格容器有固定尺寸但轨道尺寸未完全定义，或网格项目未用 grid-row / grid-column 明确放置时，该算法会按特定规则处理布局。 2. 网格轨道尺寸计算流程 算法通过以下步骤确定轨道尺寸： 步骤1：初始化明确尺寸轨道 优先处理已用 px 、 fr 、 min-content 等单位明确定义的轨道（如 grid-template-columns: 200px 1fr ），固定其尺寸。 步骤2：处理最小内容约束（min-content） 对未定义尺寸的轨道，计算每个网格项目的最小内容尺寸（如文本不换行时的宽度），取轨道内所有项目最小内容的最大值作为轨道基准。 步骤3：处理最大内容约束（max-content） 若轨道尺寸未固定，计算项目最大内容尺寸（如文本完全展开不换行的宽度），但此步骤受可用空间限制。 步骤4：分配剩余空间 若容器有剩余空间，按以下规则分配： fr 单位轨道按比例分配空间（如 1fr 2fr 表示剩余空间按1:2分配）。 auto 轨道按项目实际内容扩展，但不超过剩余空间。 若空间不足， auto 轨道可能被压缩，但不会小于 min-content 。 3. 网格项目自动放置规则 当项目未明确指定网格线位置时，按以下逻辑自动放置： 步骤1：按书写顺序排列 项目按HTML文档流顺序依次放置。默认方向为"先行后列"（即优先填满一行再换行）。 步骤2：检查网格线占用状态 从第1行第1列开始，算法逐个检查每个网格单元格是否被占用。若当前单元格已被占用，则向右移动一列；若一行结束则换到下一行。 步骤3：处理项目跨度（span） 若项目通过 grid-column: span 2 指定跨度，算法会寻找可容纳该跨度的连续空单元格。若当前行空间不足，则自动换行。 步骤4：密集排列模式（dense） 通过 grid-auto-flow: dense 可启用密集模式。当出现空间碎片时，算法会回溯填充之前的空缺，但可能打乱文档流顺序。 4. 隐式轨道的生成与尺寸 当项目被放置到显式网格范围外时（如显式定义3行但项目放置到第4行），会自动生成隐式轨道： 隐式轨道尺寸由 grid-auto-rows / grid-auto-columns 定义（默认为 auto ）。 若未设置 grid-auto-* ，隐式轨道尺寸基于项目内容自适应（类似 min-content ）。 5. 实际布局示例 假设容器宽度400px，定义 grid-template-columns: 100px 1fr; grid-auto-rows: 50px; ： 第1列固定100px，第2列按1fr分配剩余300px。 若添加第3个项目，因只有2列显式定义，该项目会自动换行到第2行，并生成隐式行高50px。 通过以上步骤，网格布局实现了对不规则内容和动态项目的灵活适配，是复杂响应式布局的核心支撑。