如何实现CSS Grid元素拉伸至指定尺寸同时靠右对齐？

你需要让第一个元素在单元格内右对齐的同时，保持宽度能拉伸到最大200px，只需要调整.element__1的样式：

• 取消注释justify-self: end;，让元素紧贴单元格右边界
• 添加width: 100%;，确保元素在单元格宽度小于200px时填充整个单元格，大于200px时被max-width:200px限制宽度

修改后的完整代码 #

HTML

<div class="grid-container">
  <div class="element__1"></div>
  <div class="element__2"></div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.5vw;
  justify-content: center;
}

.element__1 {
  background-color: green;
  max-width: 200px;
  min-width: 40px;
  min-height: 50px;
  justify-self: end;
  width: 100%;
}

.element__2 {
  background-color: red;
  max-width: 200px;
  min-width: 40px;
  min-height: 50px;
}

原理说明 #

• justify-self: end 强制元素在单元格内靠右对齐，消除了元素左侧的空白区域，让column-gap的视觉效果更准确
• width: 100% 保证当单元格宽度小于200px时，元素能填充整个单元格，不会出现右侧空白
• 当单元格宽度大于200px时，max-width:200px会限制元素宽度，同时justify-self: end让它紧贴单元格右边界，完美匹配你的需求

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