CSS Grid问题：网格区域堆叠而非并排显示

问题原因 #

核心问题在于网格项的固定宽度+外边距超出了grid-template-columns: auto auto auto分配的列宽，导致即使网格容器被划分为3列，所有网格项也被迫挤在第一列堆叠：

• 每个.dashboard-tile设置了width:7em和margin:2em，单一项的总占用宽度为7em + 2em*2 = 11em
• grid-template-columns: auto会根据内容最小宽度分配列宽，但容器可用宽度不足以容纳3个11em的列，导致区域布局失效

解决方案 #

方案1：用Grid原生间距代替margin（推荐）

使用gap属性设置网格项之间的间距，同时让Grid自动分配列宽，更符合Grid的设计逻辑：

#dashboard-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 三等分容器宽度 */
    gap: 2em; /* 替代margin，控制网格项之间的间距 */
    grid-template-areas: "dashboard-tile-1 dashboard-tile-2 dashboard-tile-3";
}
.dashboard-tile {
    border: 2px solid black;
    height: 7em;
    /* 移除固定width和margin */
}

方案2：保留固定宽度，精确设置列宽

如果需要保留网格项的固定尺寸，直接将列宽设置为网格项的总占用宽度（宽度+左右margin）：

#dashboard-tiles {
    display: grid;
    grid-template-columns: 11em 11em 11em; /* 7em宽度 + 2em左右margin = 11em */
    grid-template-areas: "dashboard-tile-1 dashboard-tile-2 dashboard-tile-3";
}
.dashboard-tile {
    border: 2px solid black;
    height: 7em;
    margin: 2em;
    width: 7em;
}

额外优化

确保网格容器有足够的可用宽度，可添加如下属性避免宽度溢出：

#dashboard-tiles {
    /* 其他属性 */
    width: 100%;
    box-sizing: border-box; /* 避免padding/border额外占用宽度 */
}

内容的提问来源于stack exchange，提问作者te-anon