0

¿Cómo puedo eliminar el espacio en blanco que se me añade al final del grid? Soy nueva en programación y he intentado varias respuestas que he encontrado de otras preguntas similares pero sigo sin conseguirlo.. Estoy creando un grid responsive donde pueda insertar imágenes + un botón con link y se mantenga la proporción de cada "casilla" del grid al cambiar el tamaño de pantalla. He creado el grid y he conseguido mantener la proporción del contenido, pero no entiendo porqué se añade una row entera al final del grid.

html,
body {
  margin: 0;
  background-color: #f6f6f6;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
}

.grid-container {
  display: grid;
  padding: 40px 20px 0px 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1rem;
  position: relative;
}

.item {
  height: 300px;
  border: 1px dashed rgb(226, 226, 226);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.image-grid-vert {
  /*height: 300px;*/
  height: 100%;
  display: flex;
  margin: 0;
}

.image-grid-horitz {
  /* width: 300px; */
  width: 100%;
  display: flex;
  margin: 0;
}

.btn {
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  border: 1px dashed rgb(226, 226, 226);
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  color: rgb(29, 29, 29);
}

.btn:hover {
  background-color: rgba(255, 0, 0, 0.4);
}

.btn-hover {
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  border: 1px dashed rgb(226, 226, 226);
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  color: rgb(29, 29, 29);
  display: none;
  margin-top: 230px;
}

.btn-hover:hover {
  display: inline-block;
  position: absolute;
  background-color: rgba(255, 0, 0, 0.4);
}

.image-grid-horitz:hover+.btn-hover {
  display: block;
  position: absolute;
}

.image-grid-vert:hover+.btn-hover {
  display: block;
  position: absolute;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <title>Sílvia de Castro</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <script src="p5.js"></script>
  <script src="sketch.js"></script>
</head>

<body>
  <div class="grid-container">

    <div class="item">
      <img src="images/02.gif" class="image-grid-vert">
      <button class="btn-hover">Ver proyecto</button>
    </div>

    <div class="item" id="sketch1">
    </div>

    <div class="item">
      <img src="images/ski.gif" class="image-grid-vert">
    </div>

    <div class="item">
      <img src="images/torratxa.png" class="image-grid-horitz">
      <button class="btn-hover">Ver proyecto</button>
    </div>

    <div class="item" id="sketch2">
    </div>

    <div class="item">
      <img src="images/14.png" class="image-grid-horitz">
      <button class="btn-hover">Ver proyecto</button>
    </div>

    <div class="item">
      <img src="images/transparent.png" class="image-grid-horitz">
      <button class="btn-hover" onclick="window.location.href='inplantentorno.html'">Ver proyecto</button>
    </div>

    <div class="item">
      <img src="images/efimera.jpg" class="image-grid-vert">
      <button class="btn-hover">Ver proyecto</button>
    </div>

    <div class="item">
      <img src="images/invisible.png" class="image-grid-horitz">
      <button class="btn-hover">Ver proyecto</button>
    </div>

    <div class="item">
      <img src="images/03.png" class="image-grid-vert">
    </div>

    <div class="item">
      <img src="images/ceramica.png" class="image-grid-horitz">
    </div>

    <div class="item" id="sketch4">
    </div>

    <div class="item">
      <img src="images/08.gif" class="image-grid-vert">
    </div>

    <div class="item" id="sketch7">
    </div>

    <div class="item">
      <img src="images/09.gif" class="image-grid-vert">
    </div>

  </div>
</body>

</html>

introducir la descripción de la imagen aquí

2 respuestas 2

0

Eso lo hace el navegador por defecto.

Son los css de cada navegador, para solucionar ese pequeño espacio, te aconsejo que cargues antes de tu css, un pequeño css que haga un reset del estilo del navegador por defecto. Hay mucha información por la web, y es una cosa que pasa mucho cuando no se usa bootstrap por ejemplo. Siempre hay que hacer un reset de los estilos del navegador.

Si no quieres eliminar todos los estilos, podrías hacer

body{
     margin:0;
     padding:0;
}

Pero como comento, busque info de como respetar los css del navegador.

Un saludo y suerte

1
  • Gracias! Soy nueva en programación y me ha sido útil tu comentario. Al final he conseguido arreglar mi problema añadiendo position: absolute; en el grid y ahora ya no me queda ese espacio en la parte inferior.
    – Silvia
    Commented el 7 jun. 2021 a las 8:17
0

Te recomiendo que siempre le agregues un archivo llamado "normalize" a tus estilos, debido a que HTML por defecto tiene unos estilos por defecto.

Normalize.css es un pequeño archivo CSS que proporciona una mejor consistencia entre navegadores en el estilo por defecto de los elementos HTML. Es una alternativa moderna, preparada para HTML5, al tradicional restablecimiento CSS

Te recomiendo que antes de empezar un proyecto hagas lo siguiente:

  1. Crear un archivo llamado "normalize.css"
  2. Pegarle lo siguiente has click aquí para ver el código.
  3. Agregar ese archivo a tu HTML antes de tus estilos, mira el ejemplo debajo:

ejemplo img

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.