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

问题描述 投票:0回答:1
我的网格容器中有两个元素。每个元素的最大宽度假设为 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 的条件,但是由于元素默认情况下会粘在单元格左边框上,所以间隙看起来要大得多。

html css css-grid
1个回答
0
投票
考虑将

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>

© www.soinside.com 2019 - 2024. All rights reserved.