0

¿Por qué está pasando esto? introducir la descripción de la imagen aquí

Lo negro de abajo es el footer de la página, es decir, quiero que el alto de la sección main aumente conforme hayan más videos, pero se superponen.

El componente que contiene estos estilos es:

{/** VIDEOS */}
<main>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "space-between",
          }}
        >
          <div className={styles.search_video_list}>
            {videos.map((video) => {
              return (
                <StandardThumbnail
                  key={video.id}
                  onClick={() => router.push(`${video.id}`)}
                  locked={false}
                  selected={false}
                  image={
                    "/assets/images/lol-logo.png"
                    //video.image
                  }
                  title={video.title}
                  duration={video.duration.toString()}
                />
              );
            })}
          </div>
        </div>
        {/** VIDEOS */}
</main>

Os dejo CSS a ver si alguien lo ve:

.main {
    margin: 160px auto 0 auto;
    max-width: 1200px;

    h1 {
        @include center
    }
}
.search_video_list {
    @include center;
    max-width: 100%;
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr; 
    gap: 6% 10%; 
    grid-template-areas: 
        ". . ."
        ". . ."
        ". . ."; 
}
1
  • 1
    ¿Qué tal si quitas el grid-template-rows: 1fr 1fr 1fr;? No creo lo necesites. Creo que puedes quitar hasta el grid-template-areas:, con las columnas basta.
    – Jaime
    Commented el 2 jun. 2022 a las 16:44

1 respuesta 1

1

Lo puedes resolver cambiando el gap. Debes usar píxeles en vez de %.

Prueba usando:

gap: 6px 10px;

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.