Hola, he seguido los pasos pero, en opera, chrome y edge el resultado se ve mal, no sé a que se deba o que esté haciendo mal; solo se ve ...

Luis G.

Luis G.

Pregunta
student
hace 4 años

Hola, he seguido los pasos pero, en opera, chrome y edge el resultado se ve mal, no sé a que se deba o que esté haciendo mal; solo se ve bien en mozilla, y así me pasa con la mayoría de los ejercicios

<section class="menu"> <h2 class="item-title">Home menu</h2> <div class="menu-grid"> <div class="menu-grid-item"> <img src="https://media.istockphoto.com/photos/person-in-a-red-curved-abstract-architectural-space-3d-rendering-picture-id1266939032?b=1&k=20&m=1266939032&s=170667a&w=0&h=WodQTm5CQIHfelkkQD9V2ODTARu9pzesO79Znj-sGT0=" alt=""> </div> <div class="menu-grid-item"> <img src="https://media.istockphoto.com/photos/businessman-walking-in-concrete-corridor-picture-id1270284029?b=1&k=20&m=1270284029&s=170667a&w=0&h=dZW2cCJIuC7cnNeGyZ4fLUSthNTaB246qPzpGpqmhc0=" alt=""> </div> <div class="menu-grid-item"> <img src="https://images.unsplash.com/photo-1518005020951-eccb494ad742?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGFyY2hpdGVjdHVyZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt=""> </div> <div class="menu-grid-item"> <img src="https://media.istockphoto.com/photos/modern-office-towers-located-in-an-international-business-district-picture-id1335363079?b=1&k=20&m=1335363079&s=170667a&w=0&h=2rUsqHQ7-wZF4ql2CEfo3DKT2xDknSJSlao9278pxXA=" alt=""> </div> <div class="menu-grid-item"> <img src="https://images.unsplash.com/photo-1488972685288-c3fd157d7c7a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YXJjaGl0ZWN0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt=""> </div> </div> </section>
.menu-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, 150px); grid-auto-rows: 150px; justify-content: center; } .menu-grid-item { display: grid; place-items: center; background-color: #ddd; padding: 10px; border-top-left-radius: 30px; } .menu-grid-item img{ width: 100%; height: 100%; border-radius: 50%; /* object-fit: contain; */ }

![](Untitled.jpg

2 respuestas
    Angel David Osorio Leyva

    Angel David Osorio Leyva

    student
    hace 4 años

    Hola Luis, te sugiero que elimines el

    display: grid
    y de paso también
    place-items: center
    de menu-grid-item, esa propiedad esta causando conflicto, ademas de que es innecesario. Con eso el código debería funcionar bien.

Curso de CSS Grid Básico

Curso de CSS Grid Básico

Experimenta con CSS Grid y crea layouts dinámicos desde cero. Aprende a utilizar propiedades para alinear, ubicar y ajustar elementos en una grilla. Realiza un proyecto de página web y descubre cómo hacerla responsiva.

Curso de CSS Grid Básico
Curso de CSS Grid Básico

Curso de CSS Grid Básico

Experimenta con CSS Grid y crea layouts dinámicos desde cero. Aprende a utilizar propiedades para alinear, ubicar y ajustar elementos en una grilla. Realiza un proyecto de página web y descubre cómo hacerla responsiva.