Say I have a header with a logo and a heading (h1 tag). Then I have the main body of the page with headings and paragraphs or images (h3, p, img tags), and a footer with whatever. The HTML might be:
.container {
display: grid;
grid-template-areas: "h h h h h h h h h h h h"
"s s s s s s s s s s s s"
"f f f f f f f f f f f f";
}
header {
grid-area: h;
}
section {
grid-area: s;
}
footer {
grid-area: f;
}
That’s all fine, but say I want the h1 to start at column 3 and span 2 columns. I’ve tried:
h1 {
grid-column: 3 / 2;
}
and even just:
h1 {
grid-column-start: 3;
}
to just get it to start in column 3.
I’ve also tried:
h1 {
grid-area: h1;
}
and changed the container’s header row to “h h h1 h1 h h h h h h h” but that doesn’t work, either.
The same problem exists for getting the picture to start at, say, column 5 and span 4 columns, with text to the right spanning two columns. What am I doing wrong?
As Jacey pointed out, when you want to use grid-column or grid-row shorthand properties and specify the span-length, the second value should be span n where n is the number of columns.
The main issue, however, is that your h1 cannot be positioned in the grid since it is not a grid item.
With Grid, just as Flexbox, only direct children of the grid of flex container are grid/flex items. So in your case, your header can be positioned along the grid tracks, but you cannot position the children of your header.
There actually will be a new value for the display property which will allow you to do what you want, but right now it only has about 5% browser support. It’s called display: contents. What this value does is basically ignore the parent container (the header, in this case) and instead, the children of header would become grid items, and you’d be able to position them along the main grid.
For now, if you want to position the items within header, you will have to either make header a flex or grid container and position the items along its own subgrid.
@JaceyBennett, I was thinking I could use the h1 element as is because it’s block level. Can you tell me why I’d need to put it inside a div?
@mewmew, I think you found my error, that the h1 isn’t a direct child of the container. Thanks for your explanation and for the info on the new contents value.
@elisecode247, that’s a very helpful website. I’d seen that example but wasn’t able to apply it to my case (because I was making the error that mewmew caught).