Muhammad Shahin's Blog

Responsive with grid Layout demo website

Muhammad Shahin's photo
Muhammad Shahin
·

1 min read

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Grid Layout</title>
<style>
    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    display: grid;
    grid-template-rows: min-content auto min-content;
    grid-template-areas: 

    'h'
    'm'
    'm'
    'm'
    'f'
    ;
}
header{
    grid-area: h;
    background-color: pink;
    width: 100%;
    border: solid;
}
main{
    grid-area: m;
    width: 100%;
    height: 100%;
}
article{
display: grid;
grid-template-areas: 
    's1 a1'
    's2 a2'
    's3 .'
;
height: 100%;
background-color: aqua;
}
@media screen and (max-width:600px) {
    article{
        grid-template-areas: 
            's1'
            's2'
            's3'
            'a1'
            'a2'
        ;

        }
}
section{
    border: solid;
    background-color: aliceblue;
}
aside{
 background-color: chartreuse;
 border: solid;
}
footer{
    grid-area: f;
    width: 100%;
    display: grid;
    grid-template-areas: 
    'n1 n2'
    ;
    background-color: rgb(112, 112, 241);
    border: solid;
}
@media screen and (max-width: 600px) {
    footer{
        grid-template-areas: 
        'n1'
        'n2'
        ; 
    }
}


#sec-1{grid-area:s1;}
#sec-2{grid-area:s2;}
#sec-3{grid-area:s3;}
#aside-1{grid-area:a1;}
#aside-2{grid-area:a2;}
#nav-1{grid-area:n1;}
#nav-2{grid-area:n2;}

</style>
</head>
<body>
    <header>
        <nav>header nav</nav>
    </header>
    <main>
        <article>
            <section id="sec-1">section-1</section>
            <section id="sec-2">section-2</section>
            <section id="sec-3">section-3</section>

            <aside id="aside-1">aside-1</aside>
            <aside id="aside-2">aside-2</aside>
        </article>
    </main>
    <footer>
        <nav id="nav-1">nav-1</nav>
        <nav id="nav-2">nav-2</nav>
    </footer>
</body>
</html>

Result: