如何拉伸网格项目,同时将其他项目保留为自动 height/width
How to stretch a grid item while leaving other items at auto height/width
在有两个项目的网格中,如果我想让第一个项目为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,但感觉我遗漏了一些明显的东西。
这是一个开胃菜 fiddle:https://jsfiddle.net/mehulkar/d8f25L0g/
请注意,如果可能的话,我不想在内容增长时添加额外的 类 来更改网格配置。
告诉第一行至少有 50 像素高。
告诉第二行消耗容器中剩余的 space。
这应该是您所需要的:
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>
在有两个项目的网格中,如果我想让第一个项目为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,但感觉我遗漏了一些明显的东西。
这是一个开胃菜 fiddle:https://jsfiddle.net/mehulkar/d8f25L0g/
请注意,如果可能的话,我不想在内容增长时添加额外的 类 来更改网格配置。
告诉第一行至少有 50 像素高。
告诉第二行消耗容器中剩余的 space。
这应该是您所需要的:
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>