CODE CSS:

.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto 1px;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}

.grid-container > div {

background-color: rgba(0, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-area: 2 / 1 / 8 / 4;
}
.item2 {
grid-area: 2 / 2 / 8 / 6;
}
.item3 {
grid-area: 5 / 2 / 6 / 6;
}
.item10 {
grid-area: 6 / 2 / 7 / 3;
}
.item11 {
grid-area: 6 / 3 / 7 / 4;
}
.item12 {
grid-area: 6 / 4 / 7 / 5;
}
.item13 {
grid-area: 6 / 5 / 7 / 6;
}
.item14 {
grid-area: 8 / 1 / 9 / 6;
}
.item15 {
grid-area: 1 / 1 / 2 / 6;
}

CODE HTML:

<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
 <div class="item3">3</div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
<div class="item7"></div>
<div class="item8"></div>
<div class="item9"></div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
<div class="item14">14</div>
<div class="item15">15</div>
</div>

<link href="css/style.css" rel="stylesheet" type="text/css">

BODY:

<!-- header abre -->

<header class="headerbase">
<!-- menu abre -->
<nav class="menu">
<a name="inicio"></a>
<a href="#inicio">Inicio</a>
<a href="#funciones">Funciones</a>
<a href="#contacto">Contacto</a>
</nav>
<!-- menu cierre -->
</header>
<!-- header cierra-->

<!-- seccion cronometro y animacion abre -->

<main>
<a name="funciones">
<div id="animacion1"></div>

<div class="chronometer">
<div id="screen">00 : 00 : 00 : 00</div>
<div class="buttons">
<button class="boton" onclick="start()">Iniciar &#9658;</button>
<button class="boton" onclick="stop()">Detener &#8718;</button>
<button class="boton" onclick="record()" >Grabar &#8634;</button>
<button class="boton" onclick="reset()">Reiniciar &#8635;</button>
</div>
</div>
<!-- seccion cronometro y animacion cierra-->
<!-- seccion redes sociales abre -->
<a name="contacto">
<div class= "contenedor-redes-sociales">

<a href="https://www.youtube.com/watch?v=d2Xjq4JHkX0" target="blank" >

<img src="img/10-removebg-preview (1).png" width="10%" height="10%">
</a>

<a href="https://www.instagram.com/cronometrodeportivo1/?hl=es" target="blank" >

<img src="img/13-removebg-preview.png" width="10%" height="10%">
</a>

<a href="https://twitter.com/ESPN_Cronometro?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr
%5Eauthor" target="blank" >
<img src="img/12-removebg-preview.png" width="10%" height="10%">
</a>

<a href="https://es-la.facebook.com/fanpagecountdown/" target="blank" >

<img src="img/11-removebg-preview.png" width="10%" height="10%">
</a>
</div>
<!-- seccion redes sociales cierra -->
</main>

<!-- JavaScript Codigo de Funciones -->

<script src="cronometro.js"></script>