1

Estoy en un problema algo tonto, tengo dos section grid, el cual el primero tiene 4 div con la propiedad grid-template-columns: 1fr 1fr 1fr 1fr; y el segundo section tiene 3 div con la propiedad grid-template-columns: 1fr 2fr 1fr; es decir el div del centro tiene 2fr a diferencia de sus hermanos de los lados con 1fr. Lo que necesito es que los div de ambos section se alineen verticalmente y sean del mismo tamaño, es decir, los div de 1f sean del mismo ancho.

Aunque ambos section tienen el mismo grid-gap: 20px; aun asi queda una pequeña diferencia de espaciado y tamaño.

Creo que el problema esta en el grid-gapque le estoy pasando, pero realmente estoy confundida no se como calcular, para lograr lo necesario.

Agradezco la ayuda.

section{
  margin: 0 auto;
  width: 500px;
  height: 200px;
  border: 5px solid #000;
  margin-bottom: 10px;
  display: grid;
  grid-gap: 20px;
}
.section1{
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}
.section2{
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr;
}
section > div {
  background: #faf;
}
<section class="section1">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>


<section class="section2">
  <div></div>
  <div></div>
  <div></div>
</section>

2
  • El tema es que en el primer section tienes tres espacio y en el segundo solo dos por lo que hay 20px de diferencia en el espacio a repartir .No creo que se puedan alinear usando unidades fr
    – user7176
    Commented el 16 oct. 2018 a las 8:03
  • Otra opción seria que en lugar de dos grid tuvieras solo uno, entonces la rejilla sería igual para todos los div y te encajarían.
    – user7176
    Commented el 17 oct. 2018 a las 7:47

2 respuestas 2

2

El problema es que en el primer section el hay 3 huecos de 20px y en el segundo solo 2, utilizando fr siempre quedarán 20px en el aire.

Lo que puedes hacer es forzar en px la segunda columna del segundo section para que cuadre bien.

 grid-template-columns: 1fr 240px 1fr;

section{
  margin: 0 auto;
  width: 500px;
  height: 200px;
  border: 5px solid #000;
  margin-bottom: 10px;
  display: grid;
  grid-gap: 20px;  
}
.section1{
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}
.section2{  
  grid-template-columns: 1fr 240px 1fr;
  grid-template-rows: 1fr;
}
section > div {
  background: #faf;
}
<section class="section1">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>


<section class="section2">
  <div></div>
  <div></div>
  <div></div>
</section>

2
  • estupendo veo que funciona, cual seria la formula a utilizar para calcular cuantos px darle al div grande del segundo section? lo he conseguido en mi proyecto real haciéndolo con % pero digamos que probando poco a poco, no con algo exacto. Gracias!
    – Gabriela
    Commented el 16 oct. 2018 a las 18:20
  • Es sencillo, tienes que saber lo que mide un div pequeño, para ello con darle click derecho e inspeccionar aparece, luego lo multiplicas por 2 y le añades el grid-gap, en este caso son 110px * 2 + 20px = 240px
    – Aitor
    Commented el 23 oct. 2018 a las 8:45
1

En su momento pensé que no podía hacerse de forma dinámica pero era tan secillo como poner un porcentaje en la columna del centro. Como en el grid superior tienes 4 columnas necesitas una columna que ocupe la mitad, un 50%.

Sigue habiendo un pequeño desfase porque en el grid superior tienes 3 espacios entre columnas y en el de abajo solo dos, la solución es usar calc y restarle esa diferencia, en este caso 10px. Pongo el section en porcentajes para que se vea que aunque cambie de tamaño se mantienen alineadas las columnas:

section{
  margin: 0 auto;
  width: 50%;
  height: 200px;
  border: 5px solid #000;
  margin-bottom: 10px;
  display: grid;
  grid-gap: 20px;
}
.section1{
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}
.section2{
  grid-template-columns: 1fr calc(50% - 10px) 1fr;
  grid-template-rows: 1fr;
}
section > div {
  background: #faf;
}
<section class="section1">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>


<section class="section2">
  <div></div>
  <div></div>
  <div></div>
</section>

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.