Grid layout nested areas

HTML & CSS
1

Hi there,
Can anyone explain me why this
code doesn’t work, please ?

2

What does “work” look like in this instance? A little more clarity on what you’re expecting to happen would allow members’ to give you the help you’re seeking.

3 Likes
3

it doesn’t work
means the elements inside the header
don’t respect the grid rules

like in this example

4

In the first example you don’t have the grid column and row rules for those elements as far as I can see.

e.g.

.header .brand {
  grid-area: brand;
  background-color: #ce93d8;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.header .masthead {
  grid-area: masthead;
  background-color: #4fc3f7;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.header .bar {
  grid-area: bar;
  background-color: #ffb300;
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.header .nav {
  grid-area: nav;
  background-color: red;
  grid-column: 1 / 4;
  grid-row: 2 / 3;
}

Or were you trying to do something differently ?

5

Hi PaulOB,
thanks for the quick reply.
The rule is inside che .header

.header {
      grid-area: header;
      display: grid;
      grid-template-areas: "brand masthead bar"
                       "nav";
      grid-template-columns: 200px 1fr 200px;
      grid-template-rows: 10vh 1fr;
      background-color: #9FA8DA;
    }
6

The template areas need to be defined with the same number of columns.

e.g. You would do this.

 grid-template-areas: 
"brand masthead bar"
"nav nav nav";

I would avoid setting heights on your rows as they are not tall enough for content.

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.