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