Every things messed up

1

I wanted to divide my page into a 3x3 grid where first row would include header and everything else below. But I seem to have messed up everything as it’s not working. can you please take a look and tell me what am I doing wrong. Thank you for your time.
Here is the link https://codepen.io/newbiewebdeveloperr/pen/PVYWMG?editors=1100#0

2

I kinda fixed it by using grid-area: x1/y1/x2/y2;. Still don’t know why it doesn’t work when I create an area template

3

You need to give a class to the section you want to be on certain part of you layout. e.g.:

HTML code

<header class="'header"

George Orwell

The conscience of a generation

CSS code
.header {
grid-area: header
}

You are giving an area to the header class not to the header tag, they are two different things.

1 Like
4

Yeah you can’t use grid-area for nested elements. Make sure you have your grid named and layed-out before you start filling it in.

<body>
   <header class="headline"> ... </header>
   <quote class=""> ... </quote>
   etc..

You now have named elements and unnamed ones but they will get placed in the grid causing unexpected behaviour.
Also hat you try to do with main here won’t work, you still have to work with squares. You could try to make main 2x3 and place quote and work on top.

   "headline headline headline"
   "quote main work"
   "main main main";

I have a bunch of starter templates that I reference when using grid, you can find them at codepen, this one is the one that uses template areas.

1 Like