grid-templateを使用して、1行4列の単純なグリッド構造を設定しています。左端の2つの列の幅は固定されており、残りの2つは残りのスペースを埋める必要があります。
ただし、2番目の列はオプションです。まったく存在しない場合があります。この場合、私はそれのためにスペースを予約したくありません。右端の2つの列がスペースを埋める必要があります。
これは、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]
コメントを追加