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:
". . ."
". . ."
". . .";
}
grid-template-rows: 1fr 1fr 1fr;
? No creo lo necesites. Creo que puedes quitar hasta elgrid-template-areas:
, con las columnas basta.