在包含两个项目的网格中,如果我想要第一个项目为50px而第二个项目要扩展整个高度,我可以这样做:
.grid { display: grid; grid-template-rows: 50px; }
.item1 {}
.item2 {}
<div class="grid">
<div class="item1">1</div>
<div class="item2">2</div>
</div>
但是,如果.item1
中的内容增长超过50px,我如何让第一行扩展?
我尝试了一些不同的解决方案,包括minmax
和使用align-self
尝试在需要时拉伸item1,但感觉我错过了一些明显的东西。
这是一个起步小提琴:https://jsfiddle.net/mehulkar/d8f25L0g/
请注意,如果可能的话,我希望在内容增长时不必添加其他类来更改网格配置。
告诉第一行至少50px高。
告诉第二行消耗容器中的剩余空间。
这应该是你所需要的:
grid-template-rows: minmax(50px, auto) 1fr;
const button = document.querySelector('#expand');
let longString = 'item1 should expand. ';
for (var i = 0; i < 4; i++) {
longString += longString;
}
button.addEventListener('click', () => {
const item1 = document.querySelector('.item1');
if (button.innerText.match(/expand/i)) {
item1.innerHTML = longString;
button.innerText = "Collapse";
} else {
item1.innerHTML = "1";
button.innerText = "Expand";
}
});
.grid {
height: 100vh;
margin: 10px;
display: grid;
grid-template-rows: minmax(50px, auto) 1fr;
}
.grid > div {
border: solid 1px;
}
Try:
<button id="expand">Expand</button>
<div class="grid">
<div class="item1 y">1</div>
<div class="item2 r">2</div>
</div>