CSS Grid Layout

Here is a layout using CSS Grid.

You can design a CSS Grid-based layout with the help of an intuitive graphical user interface and generate HTML and CSS. – https://tools.webdevpuneet.com/css-grid-layout-generator/

Demo

Open demo in a full window – https://demos.webdevpuneet.com/css/grid-layout/index.html

SOURCE


<html>
  <head>
    <meta charset="UTF-8" />
    <title>Grid Layout – CSS</title>
    <meta name="description" content="Grid layout using CSS" />

    <style>
      .item1 { grid-area: header; }
      .item2 { grid-area: menu; }
      .item3 { grid-area: main; }
      .item4 { grid-area: right; }
      .item5 { grid-area: footer; }

      .grid-container {
      display: grid;
      grid-template-areas:
        'header header header header header header'
        'menu main main main right right'
        'menu footer footer footer footer footer';
      grid-gap: 10px;
      background-color: #2196F3;
      padding: 10px;
      }

      .grid-container > div {
      background-color: rgba(255, 255, 255, 0.8);
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h1 style="margin-bottom:20px;">Grid Layout – CSS</h1>

    <div class="grid-container">
      <div class="item1">Header</div>
      <div class="item2">Menu</div>
      <div class="item3">Main</div>
      <div class="item4">Right</div>
      <div class="item5">Footer</div>
    </div>

  </body>
</html>

TOOL

This tool will help you design CSS Grid Layouts and generate HTML + CSS for them.

Tool link – https://tools.webdevpuneet.com/css-grid-layout-generator/