0

introducir la descripción de la imagen aquítengo unos div con unos grid y el problema viene cuando el scoll me baja mas que donde terminan los div. No entiendo porque se me alarga el scroll si debajo ya no hay nada...

.grid2 {
    
  margin-top:5%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(30%, 30%);
  grid-gap: 15px;
}
.grid-item {
    overflow: hidden;
  border: 3px solid green;
    border-radius: 12px;
}
 .container3 {
  display: flex;
  width: 100%;
}
<div class="grid2">
      <div class="grid-item">
    <div class="container3">
      <div class="imagen">
        <img src="gavacho.jpeg" />
      </div>
      <div>
        <h2>Prèssec Gabacho</h2>
        <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>
          <div class="grid-item">
    <div class="container3">
      <div class="imagen">
        <img src="gavacho.jpeg" />
      </div>
      <div>
        <h2>Prèssec Gabacho</h2>
        <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>
          <div class="grid-item">
    <div class="container3">
      <div class="imagen">
        <img src="gavacho.jpeg" />
      </div>
      <div>
        <h2>Prèssec Gabacho</h2>
        <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>
      </div>

2
  • El problema es el grid-auto-rows. Prueba de cambiar el valor con px a esto grid-auto-rows: minmax(30%,100px); el 4 abr. 2019 a las 19:04
  • En el ejemplo de código que pones no ocurre eso
    – user7176
    el 5 abr. 2019 a las 6:14

1 respuesta 1

1

Por debajo no hay nada en la vista...

Bueno a la vista no, pero si ha ocupado el contenido que tienes, vemos la imagen:

introducir la descripción de la imagen aquí

Entonces mi solución es en vez de usar grid-auto-rows he usado grid-template-rows:

introducir la descripción de la imagen aquí

Y así desaparece el scroll no deseado.

.grid2 {    
  margin-top:5%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 70px 1fr; /* !!! */
  
  /* Si quieres que cambie de tamaño vertical 
  
  grid-template-rows: 30vh 1fr;
  */
  
  grid-gap: 15px;
}
.grid-item {
  overflow: hidden; /* auto si quieres scroll */
  border: 3px solid green;
  border-radius: 12px;
}
 .container3 {
  display: flex;
  width: 100%;
}
<div class="grid2">
    <div class="grid-item">
      <div class="container3">
        <div class="imagen">
          <img src="gavacho.jpeg" />
        </div>
        <div>
          <h2>Prèssec Gabacho</h2>
          <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>
    <div class="grid-item">
      <div class="container3">
        <div class="imagen">
          <img src="gavacho.jpeg" />
        </div>
        <div>
          <h2>Prèssec Gabacho</h2>
          <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> 
    <div class="grid-item">
      <div class="container3">
        <div class="imagen">
          <img src="gavacho.jpeg" />
        </div>
        <div>
          <h2>Prèssec Gabacho</h2>
          <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> 
  </div>

2
  • no es lo que yo digo, te hago captura de pantalla y ves a lo que me refiero.Mira la pregunta y veras que inserto la captura.
    – winnie
    el 4 abr. 2019 a las 18:39
  • Pero haz visto en el ejemplo que he puesto que no se hace scroll poniendo grid-template-rows? Y que no hay espacio bajo de las cajas? el 5 abr. 2019 a las 8:09

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.