0

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.

1 respuesta 1

1

Puedes encontrar muchos ejemplos del sistema de grids en línea amigo, aunque la mayoría esté en inglés puedes encontrar cosas que te sirvan para hacer lo que tú quieres; en el siguiente link te muestro lo que pides; puedes usar las propiedades grid-column y grid-row para ajustar el tamaño de tu elemento en el grid, así como está este 2x2, jugando con estas 2 propiedades podrías tener el tamaño que busques. Espero te haya ayudado.

.biggerItem{
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

Añadí esta clase de CSS al contenedor del input, puedes ver su funcionamiento en el ejemplo que hice abajo. Además borré algunos de los contenedores para que se ajustara bien

https://jsfiddle.net/bLr8sjed/

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.