<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; }
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.