How to use grid area to create grid layout

grid area is an important part of the grid. It helps us to create layouts easily while writing less code. Grid is used to create a 2d layout with the help of HTML and CSS. if your layout is 1D dimension or you don’t need to manage columns and rows in your design you can use flex there.

Source code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            display: grid;
            grid: 
            'header header header header'
            'main main main aside'
            'footer footer footer footer';
            height: 100vh;
            
        }
        .container>*{
            border: 2px solid red;
            min-height: 100px;
        }
        header{
            grid-area: header;
        }
        main{
            grid-area: main;
            height: 70vh;
        }
        aside{
            grid-area: aside;
        }
        footer{
            grid-area: footer;
        }
    </style>
</head>
<body>
    <div class="container">
        <header></header>
        <main></main>
        <aside></aside>
        <footer></footer>
    </div>
</body>
</html>

Uncategorized

About Author

Ashish Yadav
Software Engineer Follow

Ashish Yadav is a passionate Software Engineer and technology enthusiast having 3 years of experience in web development with a deep interest in the ever-evolving world of technology.

With a background in computer science and extensive experience in software development, Ashish brings a unique perspective to his writing in the tech blogosphere & love to learn and work on technologies