Create CSS Grid Layout

.grid-container {
  display: grid;
  grid-gap: 15px;
  grid-auto-flow:dense;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 150px; /* height of one row */
}

.item {
  background: #222;
}

.grid-container > .item:nth-child(6n+1),
.grid-container > .item:nth-child(6n+6){
  grid-area: span 2/span 3; /* take 2 rows and 3 columns */
}

.grid-container > .item:nth-child(6n+2),
.grid-container > .item:nth-child(6n+3),
.grid-container > .item:nth-child(6n+4){
  grid-column: span 2; /* take 2 columns */
}

.grid-container > .item:nth-child(6n+5){
  grid-column: 1/span 2; /* take 2 columns and start at column 1*/
}

<div class="grid-container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS Grid Styling

you did the first steps.

To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.

.store-container {
  display: grid | inline-grid;
}

• grid – generates a block-level grid
• inline-grid – generates an inline-level grid

With grid-template-columns you can define how many columns will appear in your layout.
P.S Fr unit is a fractional unit and 1fr is for 1 part of the available space. In this example each column would take ~ 25% from the available space.

.container {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

For your task, you can use grid-template-areas feature.

The grid-template-areas CSS property specifies named grid areas,
establishing the cells in the grid and assigning them names.

For example:

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

This will generates something like that in modern browsers:

If you need more examples, take a look here:
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
https://css-tricks.com/snippets/css/complete-guide-grid/
Some of the examples are taken from the second site.

I want to design a layout with CSS grid by creating a grid area, but layout does not work as required

Each grid area must be a square or a rectangle, 3 x 1 or 2 x 2 or 4 x 2 or 1 x 1, for example. Non-rectangular shapes are not allowed. I added a content2 grid area and a lowercover grid area to your layout to try to demonstrate this more clearly.

Your main grid area covered just one column and one row, namely the third row. So trying to put three main grid areas covering three columns in the fourth row is not possible.

I created a new class, orange, by copying background-color and background-image from your item class and swapping the values of the red and blue components (i.e. #1eaafc became #fcaa1e). I applied this orange class to main, lowercover, and content2 and now the orange areas of the grid is what you were trying to achieve with your original code.

If you want to create a non-rectangular shape on a grid then you need to think about putting another grid or flexbox within your grid. But this may become difficult to manage for multiple different device screen sizes.

The following answer about grid-template-areas not working explains this very well too.

Here is a link to a complete guide to CSS grid

body {
  margin: 0px;
  padding: 0px;
}

.item {
  background-color: #1eaafc;
  background-image: linear-gradient( 130deg, #6c52d9 0%, #1eaafc 85%, #3edfd7 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  color: #ffffff;
  border-radius: 4px;
  border: 2px solid #171717;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.nav {
  grid-area: nav;
}

.cover {
  grid-area: mycover;
}

.sidebar {
  grid-area: sidebar;
}

.lowercover {
  grid-area: lowercover;
}

.content1 {
  grid-area: content1;
}

.content2 {
  grid-area: content2;
}

.footer {
  grid-area: footer;
}

.main {
  grid-area: main;
}

.container {
  border: 5px solid red;
  display: grid;
  width: 100%;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 1fr 1fr 1fr 80px;
  grid-template-areas: 
    "nav nav nav"
    "sidebar mycover mycover" 
    "sidebar main content1" 
    "lowercover lowercover content2"
    "footer footer footer";
}

.orange {
  background-color: #fcaa1e;
  background-image: linear-gradient( 130deg, #d9526c 0%, #fcaa1e 85%, #d7df3e 100%);
}

<div class="container">
  <div class="item nav">nav</div>
  <div class="item cover">cover</div>
  <div class="item sidebar">sidebar</div>
  <div class="item lowercover orange">lower cover</div>
  <div class="item main orange">main</div>
  <div class="item content1">content1</div>
  <div class="item content2 orange">content2</div>
  <div class="item footer">footer</div>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      items: [
        { a: 1, b: 2, c: 3, d: 4 },
        { a: 2, b: 3, c: 4, d: 5 },
        { a: 3, b: 4, c: 5, d: 6 },
        { a: 4, b: 5, c: 6, d: 7 },
      ]
    }
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>

<div id="app">
  <div style='display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;'>
    <template v-for='item in items'>
      <div>{{item.a}}</div>
      <div>{{item.b}}</div>
      <div>{{item.c}}</div>
      <div>{{item.d}}</div>
    </template>
  </div>
</div>