<section class="container">
<div class="child">
<pre>width:100px
height: 100px
</pre>
</div>
<div class="child">
width: (TotalWidth - 100px) / 3
height: 100px
</div>
<div class="child">
width: (TotalWidth - 100px) * 2/3
height:100px
</div>
<div class="child">
Always 100px
</div>
<div class="child">
(TotalWidth - 100px) / 3
</div>
<div class="child">
(TotalWidth - 100px) * 2/3
</div>
<div class="child">
Always 100px
</div>
<div class="child">
(TotalWidth - 100px) / 3
</div>
<div class="child">
(TotalWidth - 100px) * 2/3
</div>
</section>
.container {
display: grid;
height: 100vh;
grid-template-columns: 100px 1fr 2fr;
grid-gap: 10px;
grid-template-rows: 100px 1fr 100px;
}
.child {
text-align: center;
background: #111;
color: #fff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.