[Bug] PLAYER | CSS: construyendo layouts con Grid | Alura Latam

Buenas, quisiera que me ayudaran con mi css de player para el proyecto desarrollado la verdad no me da los espacios el grid.

HTML

Ingeniero de software en Tokio, Japón

Dev sin Fronteras

00:00 18:30

CSS

.player_descripcion, .player_temporizador-cronometro {
cursor: default;
}

.player_temporizador-cronometro_tiempo {
width: 100%;
height: 0.25rem;
background: white;
border-radius: .5rem;
}

.player_descripcion img{
width: 56px;
height: 56px;
}

.player_descripcion h3 {
font-size: 1rem;
font-weight: 700;
}

.player_descripcion span {
font-size: 0.9rem;
}

.player_volumen_nivel {
width: 70%;
height: 0.25rem;
background: white;
border-radius: .5rem;
}

/Posicionamiento de columnas y filas en el contenedor principal/

.seccion-player{
padding: 16px;
width: 100vw;
display: grid;
grid-template-columns: 204px 1fr 164px;
grid-template-rows: auto;
column-gap: 1.25rem;
}

/*
VInicial: fila y columna
VFinal: fila y columna
*/

.player_descripcion {
grid-area: 1 / 1 / 2 / 2;
display: grid; /* Grid para el área de descripción del contenido */
grid-template-columns: 56px auto; /*Columnas para el área de descripción del contenido /
grid-template-rows: auto auto; / Líneas para el área de descripción del contenido */
row-gap: .4rem;
column-gap: 0.6rem;
}

.player_temporizador {
grid-area: 1 / 2 / 2 / 3;

}

.player_volumen, .player_volumen_nivel {
grid-area: 1 / 3 / 2 / 4;

}

/* Área de descripción de contenido */

.player_descripcion img {
grid-area: 1 / 1 / 3 / 2;
align-self: center;
}

.player_descripcion h3 {
grid-area: 1 / 2 / 2 / 3;
align-self: end;
}

.player_descripcion span {
grid-area: 2 / 2 / 3 / 3;
}

/* Área de botones de volumen y reproductor */

.player_volumen, .player_temporizador-cronometro {
display: flex;
align-items: center;
column-gap: .5rem;
}

.player_temporizador-botones {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}

Hola Daniel, espero te encuestre bien,

Posibles causas y soluciones del problema:

Dimensiones de los elementos

Verifica si los elementos dentro de .player_descripcion, .player_temporizador y .player_volumen tienen contenido suficiente para ocupar el espacio asignado por el grid.
Si los elementos tienen contenido pequeño o invisible, el espacio puede parecer vacío o colapsado.

Uso incorrecto del selector combinado

.player_volumen, .player_volumen_nivel {
  grid-area: 1 / 3 / 2 / 4;
}

Al aplicar la misma grid-area a dos elementos diferentes, puede que se superpongan o el layout se vuelva confuso.
Recomendación: Asigna grid-area solo a .player_volumen, y deja .player_volumen_nivel como un hijo de ese contenedor sin posición explícita.

Comillas faltantes en comentarios

grid-template-columns: 56px auto; /*Columnas para el área de descripción del contenido /
grid-template-rows: auto auto; / Líneas para el área de descripción del contenido */

Esos comentarios están abiertos pero no cerrados correctamente, lo que puede causar errores al interpretar el CSS. Usa */ para cerrar los comentarios.

Uso de auto en grid-template-rows
grid-template-rows: auto;

Si los elementos internos no tienen altura establecida, auto puede no ocupar suficiente espacio.
Podrías intentar usar medidas relativas como min-content o 1fr si quieres controlar mejor la distribución vertical.

Falta de altura en el contenedor

Asegúrate de que .seccion-player tenga una altura suficiente para mostrar el grid correctamente:
.seccion-player {

  min-height: 150px; /* Ajusta según tus necesidades */
}

Sugerencia de depuración
Para ver visualmente cómo se están asignando los espacios, añade un borde temporal a cada área:

.player_descripcion,
.player_temporizador,
.player_volumen {
  border: 1px dashed red;
}

Esto te ayudará a ver si cada sección se está posicionando correctamente o si se están solapando o colapsando.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios