Para ver en youtube clic aquí
(No olvides suscribirte)
CSS Grids
Código CSS
.contenedor {
display: grid;
grid-template-columns: repeat(2, 65px);
grid-template-rows: repeat(4, 45px);
grid-gap: 10px 10px;
grid-auto-rows: 80px;
}
.celda {
background-color: red;
}
.uno {
grid-column: 1;
grid-row: 1;
}
.dos {
grid-column: 2;
grid-row: 1;
}
.tres {
grid-column: 1;
grid-row: 2;
}
.cuatro {
grid-column: 2;
grid-row: 2;
}
.cinco {
grid-column: 1;
grid-row: 3;
}
.seis {
grid-column: 2;
grid-row: 3;
}
.siete {
grid-column: 1 / span 2;
grid-row: 4;
}
.ocho {
grid-column: 1;
grid-row: 5;
}
.nueve {
grid-column: 2;
grid-row: 5;
}
Código HTML
<div class="contenedor">
<div class="uno celda">A</div>
<div class="dos celda">B</div>
<div class="tres celda">C</div>
<div class="cuatro celda">D</div>
<div class="cinco celda">E</div>
<div class="seis celda">F</div>
<div class="siete celda">G</div>
<div class="ocho celda">H</div>
<div class="nueve celda">I</div>
</div>
