如何用CSS Grid创建任意尺寸的n×n矩阵

问题描述 #

需要基于给定HTML结构，用CSS Grid创建任意尺寸的n×n矩阵，核心问题：

• 无法在CSS中固定网格列数（矩阵尺寸不固定）
• 横向表头（.matrix-header-row）、纵向表头（.matrix-header-col）位置已通过grid-row/grid-column固定，但数据行（.matrix-row）无法正确堆叠对齐
• 使用grid-column: 2 / -1时Chrome会忽略-1，因为未关联显式网格列

给定HTML结构：

<div class="matrix">
    <div class="matrix-corner"></div>
    <div class="matrix-header-row">Header1</div>
    <div class="matrix-header-row">Header2</div>
    <div class="matrix-header-col">Header1</div>
    <div class="matrix-header-col">Header2</div>
    <div class="matrix-row">      
        <div class="matrix-cell">100%</div>     
        <div class="matrix-cell">50%</div>     
    </div>
    <div class="matrix-row">
        <div class="matrix-cell">50%</div>
        <div class="matrix-cell">100%</div>
    </div>
</div>

现有CSS代码：

.matrix {        
    display: grid;
    grid-auto-flow: dense;        
}

.matrix-corner {
    grid-row: 1/2;
    grid-column: 1/2;
}

.matrix-header-row {
    grid-row: 1/2;
    
}

.matrix-header-col {
    grid-column: 1/2;
}

.matrix-row {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: subgrid;
    border: 1px solid red;
}

预期效果：左上角为空白角块，第一行横向排列所有横向表头，第一列纵向排列所有纵向表头，右侧数据行与表头一一对应，形成规整的矩阵布局。
当前效果：数据行未与表头对齐，布局混乱，matrix-row元素无法占据正确的横向空间。

解决方案 #

核心调整思路 #

1. 让隐式网格列能被-1识别：给.matrix设置grid-auto-columns: 1fr，确保自动生成的列有统一宽度，同时让-1能指向网格最后一列
2. 修正数据行的行定位：给.matrix-header-col和.matrix-row设置自动的行位置，确保纵向表头和数据行依次向下排列
3. 完善subgrid的生效条件：确保.matrix-row的网格列继承自父容器的网格轨道

修改后的CSS代码 #

.matrix {        
    display: grid;
    grid-auto-flow: dense;
    grid-auto-columns: 1fr; /* 关键：统一隐式列宽度，让-1生效 */
}

.matrix-corner {
    grid-row: 1/2;
    grid-column: 1/2;
    /* 可添加样式让角块可见 */
    border: 1px solid #ccc;
}

.matrix-header-row {
    grid-row: 1/2;
    /* 让横向表头自动填充列 */
    grid-column: span 1;
    border: 1px solid #ccc;
    padding: 8px;
}

.matrix-header-col {
    grid-column: 1/2;
    /* 从第2行开始依次排列 */
    grid-row: auto;
    border: 1px solid #ccc;
    padding: 8px;
}

.matrix-row {
    /* 现在-1能正确指向最后一列 */
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: subgrid;
    border: 1px solid #ccc;
}

.matrix-cell {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
}

说明 #

• grid-auto-columns: 1fr 确保所有自动生成的列宽度一致，同时让浏览器能识别-1为网格的最后一列，解决Chrome中grid-column:2/-1无效的问题
• subgrid 让数据行的列直接继承父容器的网格轨道，保证数据单元格和横向表头完美对齐
• 通过grid-row: auto让纵向表头和数据行自动按顺序占据对应行，实现任意n×n矩阵的自适应布局

内容的提问来源于stack exchange，提问作者user21141188