*{ margin: 0; width: 100%; } .discover__layout { display: grid; width: 100%; grid-template-areas: "navbar navbar navbar" "conten conten filters" "footer footer filters"; grid-template-columns: 1fr 1fr max-content; grid-template-rows: max-content 1fr max-content; app-navbar { grid-area: navbar; position: sticky; z-index: 99; top: 0; } .discover__content { grid-area: conten; } .discover__filters { display: none; grid-area: filters; } .discover__filters-show { position: sticky; top: 3.8rem !important; height: 100vh; display: flex; grid-area: filters; transition: 2s; width: 19rem; right: 0; background-color: white; app-filters{ width: 100%; } } app-footer { grid-area: footer; } }