我只能用它来实现那个Grid View的功能(没有flexbox)。
现在我准备了如下网格:
.item1 { grid-area: left; }
.item2 { grid-area: right; }
.item3 { grid-area: content; }
.grid-container {
display: grid;
grid-template-areas:
'left right'
'content content';
grid-gap: 5px;
background-color: #2196F3;
padding: 5px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 5px 0;
font-size: 30px;
}
<div class="grid-container">
<div class="item1">left</div>
<div class="item2">right</div>
<div class="item3">content</div>
</div>
这是 js fiddle :https://jsfiddle.net/d32phsyu/3/
我在左侧、右侧和内容网格模板区域的位置。
问题是我希望左侧区域只占用与其内容一样多的空间(如内联 block ),右侧区域占用所有其他空间。
不说还剩多少像素可以吗?
如果是,那么如何实现?
最佳答案
您需要定义列宽,第一个为 auto
,第二个为 1fr
(其余空间)。
.item1 {
grid-area: left;
}
.item2 {
grid-area: right;
}
.item3 {
grid-area: content;
}
.grid-container {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: 'left right' 'content content';
grid-gap: 5px;
padding: 5px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 5px;
font-size: 30px;
border: 2px solid blue;
}
<div class="grid-container">
<div class="item1">left</div>
<div class="item2">right</div>
<div class="item3">content</div>
</div>
关于html - 网格元素在必要时占用尽可能多的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53544254/