Grid

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;
.grid-container {
  display: grid;
  grid: auto / auto auto auto auto;
  background-color: #2196F3;
  padding: 10px;
  animation: mymove 5s infinite;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
@keyframes mymove {
  50% {grid: 100px / auto auto;}
}
<div class=grid-container>
  <div class=item1>1</div>
  <div class=item2>2</div>
  <div class=item3>3</div>  
  <div class=item4>4</div>
  <div class=item5>5</div>
  <div class=item6>6</div>
  <div class=item7>7</div>
  <div class=item8>8</div>
</div>

1. Grid-area


2. Grid-column


Propiedades
propiedadDescripción
grid-column-start
grid-column-gap
grid-column-end

3. Grid-gap


4. Grid-row


Propiedades
propiedadDescripción
grid-row-start
grid-row-gap
grid-row-end

5. Grid-template


Propietades
propiedadDescripción
grid-template-area
grid-template-columns
grid-template-rows

6. Grid-auto


Propiedades
propiedadDescripción
grid-auto-columns
grid-auto-rows
grid-auto-flow