​x
 
1
<!doctype html>
2
<title>Example</title>
3
<style>
4
#grid {
5
  display: grid;
6
  grid-template-columns: 50vw 1fr 10vw;
7
  grid-gap: 10px;
8
  height: 90vh;
9
  animation: myAnimation 1s ease 1s 5 alternate forwards;
10
}
11
#grid > div {
12
  background-color: dodgerblue;
13
  color: white;
14
  font-size: 4vw;
15
  padding: 10px;
16
}
17
​
18
@keyframes myAnimation {
19
  100% {
20
  grid-template-columns: 10vw 1fr 50vw;
21
  }
22
</style>
23
<div id="grid">
24
  <div>1</div>
25
  <div>2</div>
26
  <div>3</div>
27
  <div>4</div>
28
  <div>5</div>
29
  <div>6</div>
30
  <div>7</div>
31
  <div>8</div>
32
  <div>9</div>
33
</div>