我正在使用grid-template为一行四列设置一个简单的网格结构。最左边的两列具有固定的宽度,其余两列应填充剩余的空间。
但是,第二列是可选的-可能根本不存在。在这种情况下,我不想为其保留任何空间。最右边的两列应填充该空间。
对于网格模板,这显然是不可能的。有可能吗?
.grid {
display: grid;
grid-template-areas: "one two three four";
grid-template-columns: 8rem 8rem 1fr 1fr;
}
.one { background: #404788aa; grid-area: one; }
.two { background: #287d8eaa; grid-area: two; }
.three { background: #3cbb75aa; grid-area: three; }
.four { background: #dce319aa; grid-area: four; }
<div class="grid">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
<hr><p>Three and Four should fill the space:</p>
<div class="grid">
<div class="one">One</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
尝试使用display: flex
具有flex
这样的属性:
.flex {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.one { background: #404788aa; flex: 0 1 8rem; }
.two { background: #287d8eaa; flex: 0 1 8rem; }
.three { background: #3cbb75aa; flex: 1 1 auto; }
.four { background: #dce319aa; flex: 1 1 auto; }
<div class="flex">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
<hr><p>Three and Four should fill the space:</p>
<div class="flex">
<div class="one">One</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句