如何实现同一按钮内SVG图标居左、按钮文本居右的对齐效果

优先使用flex布局实现即可，你的需求是单行内的图标+文字水平排列，flex作为一维布局完全适配该场景，代码更轻量化，也不需要额外修改现有HTML结构，grid属于大材小用了。

需修改的CSS代码 #

不需要调整现有HTML结构，直接替换原有CSS即可：

#top-button-right {
  margin-left: auto;
  display: flex;
  color: white;
}

#mobile-top-button {
  background-color: darkblue;
  font-size: 1rem;
  color: white;
  /* 新增flex相关配置 */
  display: inline-flex;
  align-items: center;
  gap: 8px; /* 图标和文字的间距可自行调整数值 */
  padding: 6px 12px; /* 按需调整按钮内边距 */
  border: none;
  cursor: pointer;
}

/* 新增svg尺寸控制，避免图标过大与文字不对齐 */
#mobile-top-button svg {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
}

#mobile-top-open {
  fill: white;
}

#mobile-top-close {
  display: none;
  fill: white;
}

可选grid实现方案 #

如果确实想用grid布局也可以实现，只需把#mobile-top-button的flex相关配置替换为以下内容即可，效果完全一致，但对简单单行场景没有必要性：

#mobile-top-button {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  /* 其余原有属性保留 */
}

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