1
respuesta

Duda Grid gap

una pequeña duda, a la hora de aplicarle gap a el container de contenido, para así crear una separación entre las columnas y filas, ese container se vuelve mas ancho que el resto de conteiners (header y footer) y sale una scrollbar horizontal en la parte de abajo poco estética ![](Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad )

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

yo lo solucione aplicando un width menor al 100% para que con le tamaño del width ocupara el 100%

.destaques{
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 33.33% 33.33% 33.33%;
    height: calc(100vh - 50px);
    width: calc(100% - .9rem);
    gap: .3rem;

}

mi pregunta es si existe alguna otra forma de corregir esto directamente con la clase gap, sin tener que modificar el width del container.

1 respuesta

Hola hector... proba colocando

box-sizing: border-box;

te recomiendo que lo hagas en *(asterisco, es a todos los elementos) o body.