有没有办法让 css 网格元素拉伸到一定大小，但又表现得像将 justify-self 设置为结束？

Question

我的网格容器中有两个元素。每个元素的最大宽度假设为 200px。我希望第一个元素拉伸以填充单元格最多 200 像素，但也坚持其单元格的右边框。这是我到目前为止所拥有的：

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; */
}

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

这满足了拉伸以填充单元格最多 200px 的条件，但是由于元素默认情况下会粘在单元格左边框上，所以间隙看起来要大得多。

Answer 1

考虑将

width: 100%

 应用于 

.element__1

，使其尽可能地拉伸宽度，直到达到 

max-width

 约束。这应该允许您使用 

justify-self: end

:

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

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

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

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