Search code examples
htmlcsssyntax-errorcss-grid

Why does my grid are works for footer only?

Help me by telling why grid area is not working perfectly. I have used it on nav, main and contents too but output is unexpected (attached below). all the elements get arranged below footer and elements are not on there place.

Please help me ......I am a nw coder and learning web development online

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 1.5fr 0.8fr;
  grid-template-areas: "nav nav nav nav" "sidebar main main main" "sidebar content1 content2" "sidebar footer footer footer";
}

footer {
  grid-area: footer;
  background: aqua;
}

nav {
  grid-area: nav;
  background: rgb(208, 212, 212);
}

main {
  grid-area: main;
  background: rgb(255, 0, 0);
}

#sidebar {
  grid-area: side;
  background: rgb(238, 255, 0);
}

#content1 {
  grid-area: content1;
  background: rgb(81, 255, 0);
}

#content2 {
  grid-area: content2;
  background: rgb(255, 0, 255);
}
<div class="layout">
  <nav id="navbar">Home About us contact us</nav>
  <main>Main</main>
  <div id="sidebar">Sidebar</div>
  <div id="content1">Content 1</div>
  <div id="content2">Content2</div>
  <footer>Footer</footer>
</div>

output:

Output

Solution

  • In addition to Pawan's answer,

    1. You have to add the grid-template attribute to the layout in css.
    2. You have specified 3 rows in grid-template-rows attribute, but included 4 rows in grid-template-areas.
    3. (From Pawan's answer) You defined 4 columns but in grid templates areas you used three sidebar content1 content2. You can add a period (.), if you want to ignore a column, e.g. sidebar . content1 content2.
    4. (From Pawan's answer) You have wrong grid-area for sidebar. Just change to grid-area: sidebar; in #sidebar.

    A working solution (JS Fiddle Link): https://jsfiddle.net/hetkxj03/