<div class="grid">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right">Right</div>
</div>
.grid {
  display: grid;
  width: 800px;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 50px;
  border: 5px solid black;
}

.left {
  width: 100px;
  background: yellow;
  grid-column: 1;
}

.center {
  width: 100px;
  background: cyan;
  justify-self: center;
  grid-column: 2;
}

.right {
  animation: width-change 4s infinite;
  background: magenta;
  grid-column: 3;
}

@keyframes width-change {
  0%   { width: 100px; }
  50%  { width: 500px; }
  100%  { width: 100px; }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.