3
respuestas

los resultados del tutorial de GRID LAYOUT salen diferentes a lo que se muestra

Sigo los pasos tal cual los da el instructor, pero los resultados se ven diferentes. No adjunto imágenes porque veo que varixs tuvieron el mismo problema, sino para que desde Alura corrijan los errores del tutorial.

3 respuestas

Hola! Me paso exactamente lo mismo, no se si yo me perdí en alguna parte pero me di cuenta que el sitio no quedaba de la misma manera porque descomprimiendo archivos al final del curso para revisarlos y encontrar el error, vi que varias "class" estaban con los nombres cambiados y con estilos diferentes en los archivos css.

Saludos Muchachos, al igual que ustedes yo ingrese a este foro con algunos problemas, pero los problemas siempre van a exitir (bugs). En relacion a la imagen encontre en una de las respuestas que el detalle esta en que al colocar el height en descatados.css, debemos colocar asi las instrucciones:

height: calc(110vh - 50px);

y yo lo tenia asi: height: calc(110vh -50px); -- revisen

copiando ,tal cual lo que hace el profe, me queda muy mal.hice algunos cambios guiandome por el pdf y dentro de todo se ve bien

.box {
    align-items: flex-end;
    display: flex;
    justify-content: center;
}

.destaques {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 33.33% 33.33% 33.33%;
    height: calc(100vh - 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/4;
    grid-row: 2/3;
}

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

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