0

I am trying to generate a layout with CSS grid that will create a top div for a header and then a side div for navigation and a central div for content. My code is as follows:

.container{
display: grid;
gap: 20px;
grid-template-areas:
  "hd hd"
  "nav des"
  "nav des";
}

.hd{
  grid-area: "hd";
}

.nav{
  grid-area: "nav";
}

.des{
  grid-area: "des";
}

But all this does is put hd in the top left, nav in the bottom left, and des in the top right.

Any thoughts would be greatly appreciated!

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
devopsrc
  • 3
  • 1

1 Answers1

0

u need to update grid-area: "hd"; to grid-area: hd; and gap: 20px; to grid-gap: 20px;

.container{
display: grid;
grid-gap: 20px;
background-color: #2196F3;
padding: 10px;
grid-template-areas:
  "hd hd hd hd hd hd"
  "nav des des des des des";
}

.container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.hd{
  grid-area: hd;
}

.nav{
  grid-area: nav;
  height: 100px;
}

.des{
  grid-area: des;
}
<div class="container">
<div class="hd">1</div>
<div class="nav">2</div>
<div class="des">3</div>
</div>
Abhi747
  • 304
  • 3
  • 9