Create Layout using CSS grid

CSS Grid help you to create a responsive website. Keeps everything laid out correctly on different screen resolutions.

To create grid layout you need to set display: grid on your element or class in css.

Yellow - sidebar

red - footer

blue - header

pink - content

HTML CODE

<body>
    <div class="header">
        Header
    </div>
    <div class="drawer">
        Sidebar
    </div>
    <div class="content">
        Content
    </div>
    <div class="footer">
        Footer
    </div>
</body>

CSS CODE

  
body {
   display: grid;
   margin: 0;
   padding: 0;
   height: 100vh;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(10, 1fr);
   /* grid-template-areas:
    "header header header header"
    "drawer content content content"
    "drawer content content content"
    "drawer content content content"
    "drawer content content content"
    "drawer content content content"
    "drawer content content content"
    "drawer content content content"
    "drawer content content content"
    "footer footer footer footer" */
   grid-template-areas:
    "header header header header"
    "content content content drawer"
    "content content content drawer"
    "content content content drawer"
    "content content content drawer"
    "content content content drawer"
    "content content content drawer"
    "content content content drawer"
    "content content content drawer"
    "footer footer footer footer"
  }

Grid will have 4 columns and 10 Rows and each column and row will be 1 fraction of the available space.

.header {
   grid-area: header;
   min-height: 3rem;
   background-color: blue;
 }

.drawer {
   grid-area: drawer;
   background-color: yellow;
   min-width: 10rem;
 }

.footer {
   grid-area: footer;
   min-height: 3rem;
   background-color: red;
 }

 .content {
   grid-area: content;
   background-color: pink;
 }

If you want drawer on left side than set drawer as first place in template-areas.

Already commented code for left side drawer.

Hope you like it

Create Layout using CSS grid