htmlcssgrid

Media queries not working in responsive web design with grids

CSS used on the page to display grid elements in different viewport size Code to display the grid and its descendants based on the size of the viewport. If the size of the screen becomes smaller then based on the size of the screen the columns should drop and acquire a single row in mobile mode for each container. In the case of tablet mode main and sidebar should drop from 2nd row to the third row.

body{
    margin: 0;
    padding: 0;
}

.gridContainer{
    display: grid;
    height: 100%;
    
    grid-template-columns: 20% 1em 1fr 1em 20% ;
        grid-template-rows:  4.4em 1em 1fr 1em 4.4em;
    grid-template-areas: "header header header header header"
        ". . . . ."
        "navigation . mainContent . sidebar"
        ". . . . ."
        "footer footer footer footer footer";
}
.gridHeader{
    grid-area: header;
    background-color: #A62E5C;
}

.gridFooter{
    grid-area: footer;
    background-color: #A62E5C;
}

.gridNav{
    grid-area: navigation;
    background-color: #9BC850;
}

.gridMain{
    grid-area: mainContent;
    background-color: #9BC850;
}

.gridSide{
    grid-area:  sidebar;
    background-color: #9BC850;
}

.grid-item {
    color: #fff;
    box-sizing: border-box;
    font-size: 1em;
    padding: 1em;
    overflow: hidden;
    text-align: center;
}

@media screen and (max-width: 768px) {
    
    .grid-container {
        grid: 1fr 1em 30% / 4.4em 1em 3.6em 1em 1fr 1em 4.4em;
        grid-template-areas:
        "header header header"
        ". . ."
        "navigation navigation navigation"
        ". . ."
        "content . sidebar"
        ". . ."
        "footer footer footer";
    }
    
}
    
@media screen and (max-width: 480px){
    .gridContainer{
        grid: 1fr / 3.6em 1em 4.6em 1em 1fr 1em 4.6em 1em 3.6em;
        grid-template-areas: "header"
            "."
            "navigation"
            "."
            "mainContent"
            "."
            "sidebar"
            "."
            "footer";
    }    
}

HTML is used on the page to display grid elements in different viewport size:

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>
            Modern Web Layout
        </title>
        <link rel="stylesheet" href="css/main.css" type="text/css">
    </head>
    <body>
        <main class="gridContainer">
        <header class="gridHeader grid-item">
            HEADER
        </header>
            <section class="gridNav grid-item">
                NAVIGATION AREA
            </section>
            <section class="gridMain grid-item">
                MAIN CONTENT
            </section>
            <section class="gridSide grid-item">
                SIDEBAR
            </section>
            <footer class="gridFooter grid-item">
                FOOTER
            </footer>
        </main>
    </body>
</html>

Codepen

Solution

  • You have used .grid-container instead of .gridContainer for tablet layout.