使用CSS Grid布局时，如何解决列表项最后一个左对齐的问题？

问题分析 #

你当前的CSS Grid配置中，grid-template-columns: 250px repeat(auto-fit, minmax(250px, 1fr))强制生成了一个固定宽度的左侧列，后续列自适应扩展。即使设置了justify-content: right，网格轨道的排列起点仍从左侧固定列开始，导致最后一行（或单个）列表项会默认填充最左侧的轨道，呈现左对齐效果。

解决方案 #

修改<ul>的CSS代码，调整列布局规则并优化对齐逻辑：

ul {
    display: grid; 
    /* 移除固定左侧列，改为全自适应列 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-template-rows: auto;
    grid-gap: 15px;
    overflow: hidden;
    width: 100%;
    /* 让整个网格轨道组靠右排列 */
    justify-content: right;
    /* 确保列表项内容右对齐 */
    text-align: right;
}

/* 确保列表项填充整个网格单元格宽度 */
li.shortcut {
    width: 100%;
}

修改说明 #

1. 移除固定列：将250px repeat(...)改为repeat(auto-fit, minmax(250px, 1fr))，让所有列根据容器宽度自适应生成，避免强制左侧固定列限制轨道排列。
2. 轨道组靠右：justify-content: right会让网格轨道整体向容器右侧对齐，当最后一行轨道数量不足时，列表项会填充最右侧的可用轨道，实现右对齐效果。
3. 列表项填充整宽：li.shortcut { width: 100%; }确保列表项完全填充所在的网格单元格，避免内容宽度不足导致的视觉偏移。

补充验证 #

如果需要列宽固定为250px，可将minmax(250px, 1fr)改为250px，即grid-template-columns: repeat(auto-fit, 250px)，配合justify-content: right同样可实现需求。

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