如何通过Display Grid定位使网页中的Explore按钮更靠右？

针对你想要将Explore按钮调整至更靠右位置的需求，基于现有HTML结构，可通过以下几种Grid布局调整方式实现：

方案一：简化Grid列结构，让按钮容器靠右 #

修改.grid-container的CSS，将容器分为两列，第一列承载文本内容，第二列自适应按钮宽度并靠右对齐：

.grid-container {
  display: grid;
  grid-template-columns: 1fr auto; /* 第一列占满剩余空间，第二列适配按钮宽度 */
  align-items: start; /* 保持文本块与按钮顶部对齐 */
  gap: 2rem; /* 可选：增加两列之间的间距 */
}

/* 让按钮所在容器内部靠右对齐 */
.grid-container .flex {
  justify-content: flex-end;
}

方案二：利用Grid列定位精准控制位置 #

如果需要更精确的布局控制，可以调整Grid列模板，并指定按钮容器的列位置：

.grid-container {
  display: grid;
  grid-template-columns: 10em 1fr 2em; /* 左侧留白 + 内容区 + 右侧留白 */
  max-width: 60rem; /* 继承原有最大宽度 */
}

/* 让文本内容块占据中间列 */
.grid-container > .container:first-child {
  grid-column: 2 / 3;
}

/* 让按钮容器靠右，占据中间列到右侧留白的位置 */
.grid-container > .flex {
  grid-column: 2 / 4;
  justify-content: flex-end;
}

注意事项 #

• 若原有even-columns类包含Grid相关样式，可能会与.grid-container的设置冲突，建议移除该类或确保.grid-container的样式优先级更高。
• 按钮的margin-top: 5rem可以保留，用于控制按钮与顶部的垂直间距。

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