1

Hola quiero crear una cuadricula de 3x3 divque estén todos bien posicionados. Al principio he pensado en crear un divprincipal y que dentro de estos haya 9 divel problema viene cuando me pone los div siempre uno por debajo del otro. Lo que yo quiero es conseguir una tabla de 3x3 y que dentro pueda añadir una foto y un texto pequeñito sin que se me deforme la cuadricula. He probado de mil maneras y siempre se me acaba deformando. Pido una ayudita a ver si puedo solucionarlo, gracias.

.prueba{
    margin-left: 5%;
    margin-right: 70%;
    border:solid;
}
.prueba1{
    border:solid;
    margin-right: 40%;
    margin-left:35%;
}
.prueba2{
    border:solid;
    margin-left:80%;
}
<div class="general">
        <div class="prueba">1</div>
        <div class="prueba1">2</div>
        <div class="prueba2">3</div>
        <div class="prueba">3</div>
        <div class="prueba1">4</div>
        <div class="prueba2">5</div>
        <div class="prueba">6</div>
        <div class="prueba1">7</div>
        <div class="prueba2">7</div>
 </div>

4
  • Estas usando algun framework? Commented el 3 abr. 2019 a las 14:29
  • Desconozco que es eso,soy nuevo en la creación de webs...
    – winnie
    Commented el 3 abr. 2019 a las 14:30
  • 2
    No tienes ninguna restricción para usarlo? Si es así te recomiendo usar bootstrap creo que te ayudara ya que tiene un grid integrado por decirlo así. Este te puede ayudar mucho te paso la documentación getbootstrap.com/docs/4.3/layout/grid Commented el 3 abr. 2019 a las 14:34
  • te aconsejo que veas bien como funcionan los tags html, es decir las diferencias entre ellos, eso te ayudarà bastante, el problema que señalaste "se me muestran un div abajo del otro" es por el display que tiene por default el tag div, que hace en modo que se vizualize en bloque (ocupa toda la linea/ancho) para que esten uno al lado del otro tendrias que usar en css div { display:inline-block } y ajustarlo a tu gusto con width y height [aca][w3schools.com/html/default.asp] vas a encontrar puntos interesantes para mejorar, ☺
    – Federico
    Commented el 3 abr. 2019 a las 14:57

2 respuestas 2

8

Te recomiendo utilizar CSS Grid, es perfectamente dirigido a este tipo de diseños; y no requieres mucho codigo CSS, de igual manera es altamanete ajustable de modo que puedes modificarlo a como mejor te parezca.

Simplemente necesitas un contenedor principal al cual aplicas la propiedad display: grid, con esto todos los elementos hijos se comportaran como grid-items y puedes aplicarle las propiedades que necesites para tu cuadricula.

  • grid-template-columns: Cantidad de columnas
  • grid-auto-rows: Tamaño de las filas
  • grid-gap: Espacio entre elementos de la cuadricula

Existen muchas mas propiedades que puedes utilizar para modificar el diseño, aqui te dejo una guía para que te familiarices mejor con CSS Grid:

https://www.adictosaltrabajo.com/2018/01/30/maquetacion-con-css-grid/

https://css-tricks.com/snippets/css/complete-guide-grid/

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(80px, auto);
  grid-gap: 15px;
}

.grid-item {
  border: 1px solid black;
}
<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Ejemplo con contenido:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(80px, 80px);
  grid-gap: 15px;
}

.grid-item {
  border: 1px solid black;
  overflow: hidden;
}

.grid-item img,
.grid-item p,
.grid-item h1 {
  margin: 0;
}

.container {
  display: flex;
}

.container img {
  max-width: 50%;
}
<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed nostrum modi quis assumenda ad? Asperiores nisi eligendi rem ea soluta natus nostrum vitae aliquam, officiis, suscipit, exercitationem pariatur quae doloremque.
    </p>
  </div>
  <div class="grid-item">
    <h1>Un titulo grande</h1>
  </div>
  <div class="grid-item"></div>
  <div class="grid-item">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="grid-item"></div>
  <div class="grid-item">
    <div class="container">
      <img src="https://via.placeholder.com/450" />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed nostrum modi quis assumenda ad? Asperiores nisi eligendi rem ea soluta natus nostrum vitae aliquam, officiis, suscipit, exercitationem pariatur quae doloremque.
      </p>
    </div>
  </div>
  <div class="grid-item"></div>
  <div class="grid-item">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed nostrum modi quis assumenda ad? Asperiores nisi eligendi rem ea soluta natus nostrum vitae aliquam, officiis, suscipit, exercitationem pariatur quae doloremque.
    </p>
  </div>
</div>

9
  • 2
    Buena respuesta sin embargo al igual que el otro usuario deberías explicar que hace el código que pones para que sea más entendible a todo aquel que consulte
    – user75901
    Commented el 3 abr. 2019 a las 14:51
  • Pero si juego con px en el tamaño de los div dependiendo de la resolución de la pantalla se verán de una manera u de otra no?Yo suelo usar % por eso. De hecho no con grid pero ya me ha pasado de poner cosas con px y luego abrirlo desde otra pantalla y verlo todo diferente.
    – winnie
    Commented el 3 abr. 2019 a las 15:55
  • En realidad el punto de Grid es no complicarte mucho definiendo tamaños... Si, puedes manejar los tamaños en dependencia de la pantalla con px pero existe tambien la unidad que utilizo en el ejemplo: 1fr, esto define que el elemento deberia usar 1 fraccion del espacio total disponible y que se repita en 3 columnas... puedes solo cambiar estos valores para que sean menos o mas columnas en otras pantallas, siempre utilizaran "una fraccion del espacio que haya disponible"... Incluso intenta solo cambiar repeat(3, 1fr) y ponle 4 o 5 y veras como el grid si ajusta solo
    – IvanS95
    Commented el 3 abr. 2019 a las 16:06
  • Tambien existe otra opcion que es auto-fill o auto-fit; estas sirven para que el grid ajuste el numero de columnas por si solo, pero seria bueno que investigaras esas propiedades para comprenderlas mejor, ya que se comportan un poco diferente.. Si te fijas solo uso pixeles para definir el espacio entre los elementos y una altura minima para las cajas para que sean visibles
    – IvanS95
    Commented el 3 abr. 2019 a las 16:09
  • Primero de todo muchas gracias por tu explicación, llamame lelo pero a lo que yo me refiero es que, por ejemplo si el div es de 30cm x 30cm cuando inserto algo cambia el tamaño y hace que los otros se vuelvan pequeños y lo que yo quiero es que el tamaño del div no varíe y se quede siempre igual y le ponga lo que le ponga dentro no deje que eso varíe.
    – winnie
    Commented el 3 abr. 2019 a las 16:47
3

Lo principal es el css. Básicamente le puse un tamaño de un 30% del total a cada div, y los mostre tipo tabla con display: table;, ademas de flotarlos a la izquierda con float: left;

.divCuadricula{
  width:30%;
  border: solid 1px black;
  display: table;
  float: left;
  text-align: center;
  margin: 1%;
  max-width: 30%;
  height: 80px;
}
.divCuadricula img {
  width: 100%;
  height: 100% ;
}
<div class="general">
  <div class="divCuadricula"><img src="https://dummyimage.com/16:9x1080/"></img></div>
  <div class="divCuadricula"><img src="https://dummyimage.com/16:9x1080/"></div>
  <div class="divCuadricula"><img src="https://dummyimage.com/16:9x1080/"></div>
  <div class="divCuadricula"><img src="https://dummyimage.com/16:9x1080/"></div>
  <div class="divCuadricula"><img src="https://dummyimage.com/16:9x1080/"></div>
  <div class="divCuadricula"><img src="https://dummyimage.com/16:9x1080/"></div>
  <div class="divCuadricula"><img src="https://dummyimage.com/16:9x1080/"></div>
  <div class="divCuadricula"><img src="https://dummyimage.com/16:9x1080/"></div>
  <div class="divCuadricula"><img src="https://dummyimage.com/16:9x1080/"></div>
</div>


Para que los valores de adentro no tomen cualquier valore y rompan la estructura, les tienes que decir q tomen tanto el width como el height de el div donde estan. Para eso hacen falta estas lineas:

.divCuadricula img {
  width: 100%;
  height: 100% ;
}
2
  • Esto funciona así con un numero dentro pero en cuanto le pongo contenido(foto,texto etc...) dentro ya se deforma y es a lo que me refería con mi pregunta.
    – winnie
    Commented el 3 abr. 2019 a las 15:05
  • No, probablemente pusiste algo adentro que supera el tamaño que tiene el div, y por eso se agranda y se va para abajo. Para eso puedes, o bien ponerle un máximo al div, o a lo que pones dentro, decirle q use como máximo el ancho del div. Commented el 3 abr. 2019 a las 15:07

Tu Respuesta

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

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