Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

[Duda] Duda

Una pregunta, alguien sabe porque me quedan alineados de esta forma los destaques__categorias___item?

.destaques{
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 33.33% 33.33% 33.33%;
    height: calc(110vh - 50px);
}
.destaques__principal{
    background: url('../img/fortnite.jpg') center/cover no-repeat;
    grid-column: 1/4;
    grid-row: 1/3;

}
.destaques__secundario:nth-child(2){
    background: url(../img/pubg.jpg) center/cover no-repeat;
    grid-column: 4/4;
    grid-row: 1/2;

}
.destaques__secundario:nth-child(3){
    background: url(../img/slack.png) center/cover no-repeat;
    grid-column: 4/5;
    grid-row: 2/3;

}
.destaques__secundario:nth-child(4){
    background: url(../img/whatsapp.png) center/cover no-repeat;
    grid-column: 4/5;
    grid-row: 3/4;

}
.destaques__secundario:nth-child(5){
    background: url(../img/cs-go.jpg) center/cover no-repeat;
    grid-column: 3/4;
    grid-row: 3/4;

}
.destaques-categorias{
    grid-column: 1/3;
    grid-row: 3/4;
}
.destaques__categorias___lista{

    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: space-between;
}
.destaques__categorias___item{
    align-items: center;
    background: #fdfdfd;
    display: flex;
    color: #333333;
    width: 50%;
    padding: 1rem;
}

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

2 respuestas
solución!

Hola Gustavo,

Es posible que el problema se deba al uso de una propiedad incorrecta en .destaques__categorias___item. En su lugar, pruebe usar la propiedad justify-content para establecer el espacio entre los elementos. Esto podría ayudar a distribuir los elementos de forma uniforme en el espacio deseado.

Otra observación es que estás dando un ancho de 50% a ese elemento, lo que significa que ocupará un ancho de 50% del ancho total que podría ocupar.

Espero que te haya ayudado pero si sigues teniendo dudas, ¡vuelve al foro!

Un saludo.

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

Gracias ya lo pude resolver