Trucos y efectos de CSS3 432z Tutoriales En Linea

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Trucos y efectos de CSS3 - Tutoriales En Linea</title>
</head>
<body>

<style>

.contenedor {
           display: grid;
           grid-template-columns: repeat(2, 50%);
           grid-template-rows: repeat(4, 50%);
           grid-gap: 10px 10px;
           grid-auto-rows: 80px;
       }
       .celda {
           background-color: #4284f3;
       }
       .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;
       }

</style>

</body>
</html>