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
propiedad | Descripción |
grid-column-start | |
grid-column-gap | |
grid-column-end | |
3. Grid-gap
4. Grid-row
Propiedades
propiedad | Descripción |
grid-row-start | |
grid-row-gap | |
grid-row-end | |
5. Grid-template
Propietades
propiedad | Descripción |
grid-template-area | |
grid-template-columns | |
grid-template-rows | |
6. Grid-auto
Propiedades
propiedad | Descripción |
grid-auto-columns | |
grid-auto-rows | |
grid-auto-flow | |