Skip to main content
El título no debe contener tecnologías, para eso están los tags. :)
Origen Enlace

problema Problema con grid-gap y fr en cssgrid. CSS

estoyEstoy 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>

problema con grid-gap y fr en cssgrid. CSS

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>

Problema con grid-gap y fr

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>

Origen Enlace
Gabriela
  • 193
  • 1
  • 14

problema con grid-gap y fr en cssgrid. CSS

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>