CodePen Embed - CSS grid

<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 is owned by Amit Mittal on CodePen.

See more by @akmittal on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.