1

I am currently mocking up a layout, learning about CSS-Grid but I have come to an issue during my media query setup where depending on the query, and the layout I specify, the grid area I do not want in the template shows up after all my content in the bottom right. It's a very weird behavior.

I have tried setting it's display to none in the css but when I get to the larger screen sizes it stays hidden. As I hide more elements, the last element to not be shown is placed over-top the bottom-right area element.

Code: https://jsfiddle.net/sbf05joq/

Images: https://i.stack.imgur.com/4Rz2U.jpg

...
@media (min-width: 576px) {
    .site {
        ...
        grid-template-areas: "title" "header" "main" "footer";
        .sidebar {
            display: none;
        }
    }
}

...

@media (min-width: 992px) {
    .site {
        ....
        grid-template-areas: 
            "title title"
            "header header"
            "sidebar main"
            "footer footer";
    }
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
ChadMacLean
  • 13
  • 3
  • As in the scenario in the duplicate, there is both an extra column *and an extra row* in your layout. https://jsfiddle.net/s7v3phdu/ – Michael Benjamin Mar 10 '20 at 02:51
  • When it comes to using `display: none`, and the reason the element fails to re-appear on different screen sizes, you need to consider [specificity](https://stackoverflow.com/a/35657646/3597276). – Michael Benjamin Mar 10 '20 at 02:53

0 Answers0