Tengo una tabla diseñada con Grid y en la primera caja le agrege un <input tipe="file" pero entonces quiero que ese input se pueda combine con las cajas(2,5,6) para tenerlo en un 2x2 o si se puede en un 4x4 seria mejor, alguien me puede explicar como podria hacer o que pagina puedo mirar con un tema relacionado, y tambien si se podria hacer lo mismo pero con un lienzo de canvas para insertar una imagen?.
este es mi codigo
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto ;
grid-gap:;
background-color: #2196F3;
padding: 5px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 2px solid rgba(0, 0, 0, 0.8);
padding: 10px;
font-size: 30px;
text-align: center;
}
.subir{
padding: 1px 1px;
background: black;
color:#fff;
border:0px solid #fff;
}
.subir:hover{
color:#fff;
background: #0096f3;
}
.enviar {
padding: 2px 3px;
background: black;
color: #fff;
border: 0px solid;
margin: 0;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>marcos</title>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">
<label for="file-upload" class="subir">
<i class="fas fa-cloud-upload-alt"></i> Subir archivo
</label>
<input id="file-upload" onchange='cambiar()' type="file" style='display: none;'/>
<div id="info"></div>
<input class="enviar" type="submit" value="Enviar">
</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
</div>
<script src="diseño.js"></script>
</body>
</html>
Agradezco a quien me pueda dar una solución, muchas gracias.