How to override grid-template-areas-CodePudding

How can I make a div that overrides all the template areas and goes to the front, so that the item6 will be displaying in front of all the other items.

I tried to with grid-row-start and grid-row-end but it doesn't seem to work

<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.item6 { grid-row-start: 0;
         grid-row-end: 6}
.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>

<div >
  <div >Header</div>
  <div >Menu</div>
  <div >Main</div>  
  <div >Right</div>
  <div >Footer</div>  
  <div >Override everything</div>
</div>

</body>
</html>

CodePudding user response：

There is no grid-column-start: 0 they all start with 1.

Also you have to specify the grid-columns to be covered.

<!DOCTYPE html>
<html>

<head>
  <style>
    .item1 {
      grid-area: header;
    }
    
    .item2 {
      grid-area: menu;
    }
    
    .item3 {
      grid-area: main;
    }
    
    .item4 {
      grid-area: right;
    }
    
    .item5 {
      grid-area: footer;
    }
    
    .item6 {
      grid-row-start: 1;
      grid-row-end: 6;
      grid-column-start: 1;
      grid-column-end: -1
    }
    
    .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>

  <div >
    <div >Header</div>
    <div >Menu</div>
    <div >Main</div>
    <div >Right</div>
    <div >Footer</div>
    <div >Override everything</div>
  </div>

</body>

</html>

CodePudding user response：

I think you can do that by adding to the CSS of the item6

position: absolute;
z-index: 1;

And fix position with

top: 0px;
left: 0px;