Como usar Gridlayout en CSS3

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>

Mis enlaces sociales

Facebook
Twitter
Google+
Patreon
Codepen