我有一個帶有內部專案（在本例中是.metadatadiv）的選單網格布局，我想展開并按下另一個專案。請參見此處的示例：
.wrapper {
display: grid;
grid-column-gap: 8px;
grid-row-gap: 4px;
grid-template-columns: 48px minmax(0px, 3fr) 1fr;
grid-template-rows: 24px 20px 44px;
grid-template-areas:
"icon title action-bar"
"icon metadata action-bar"
"tabs .... bottom-right";
padding: 16px 16px 0 16px;
}
.metadata {
grid-area: metadata;
display: flex;
align-items: baseline;
direction: ltr;
}
.innterTest {
height: 100px;
background-color: red;
}
.metadataItem {
display: flex;
}
.tabs {
grid-area: tabs;
grid-column-end: 3;
padding-top: 4px;
}<div class="wrapper">
<div class="icon">icon
</div>
<div class="title">TITLE
</div>
<div class="action-bar">action bar
</div>
<div class="metadata">
<div class="metadataItem">
data node 1
<div class="innterTest">
testing
</div>
</div>
<div class="metadataItem">
data node 2
</div>
<div class="metadataItem">
data node 3
</div>
<div class="metadataItem">
data node 4
</div>
</div>
<div class="tabs">tabs
</div>
</div>https://jsfiddle.net/c8wx2bgn/
如果您檢查外包裝.metadatadiv，它似乎保持較小的尺寸。我想要發生的是它擴展并向下推.tabs網格專案。總體網格布局一直如我所愿，但我在元資料中添加了更多專案，并希望它在展開時將選項卡向下推。
我嘗試在元資料和元資料 div 上強制執行高度，但這似乎不會影響布局。網格新手，所以不確定我在這里缺少什么。
uj5u.com熱心網友回復：
你有grid-template-rows: 24px 20px 44px.
這意味著包含您的metadatadiv 的第二行的高度限制為 20 像素。
試試這個：grid-template-rows: 24px auto 44px。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/425026.html