Overflow/Extend CSS Grid-Areas for Certain Elements

Question

I'm learning CSS Grid and am very fascinated by it. Particularly, I'm using the template-areas approach to define structure. Here's an example of the code I have written to define a basic article layout with two sidebars, a main content area, and an article footer:

HTML:

<div class="article-wrapper">
    <div class="sidebar-left">
    Left Sidebar Content
    </div>
    <div class="article-content">
        Main Article Content
        <div class="article-overflow">
            Overflow Content
        </div>
    </div>
    <div class="sidebar-right">
        Right Sidebar Content
    </div>
    <div class="article-footer">
        Article Footer Content
    </div>
</div>

CSS:

.article-wrapper{
  display:grid;
  grid-template-areas:
          "h h h h h h h h h h h h"
          "l l c c c c c c c c r r"
          "l l f f f f f f f f r r";
}

.article-wrapper > .article-sidebar-left{
  grid-area: l;
}
.article-wrapper > .article-sidebar-right{
  grid-area: r;
}
.article-wrapper > .article-content{
  grid-area: c;
}
.article-wrapper > .article-footer{
  grid-area: f;
}

My question; is there a way, using this approach of grid areas, that I can make the article-overflow element, which is wholly within the c grid-template-area to extend into the l and r areas?

Essentially, I'd like the width of the article-overflow element to be as such:

l x x x x x x x x x x x r whereas now it is l l x x x x x x x x r r

In other words, I'm trying to extend it one grid unit into each of the areas used by the sidebars currently.

score 1 · Answer 1 · answered Jun 09 '18 at 18:30

...is there a way, using this approach of grid areas, that I can make the .article-overflow element, which is wholly within the c grid-template-area to extend into the l and r areas?

No.

The .article-overflow element isn't even a grid item, so it doesn't recognize grid properties¹.

There's a possibility that in a future version of Grid Layout the subgrid feature ², which allows the children of grid items to respect the lines of the primary container, will be implemented. But that's speculation. And even then, there's no guarantee that the grid area you want will be available with grid-template-areas. It may only be available with line-based placement ³.

Notes:

¹ Grid properties not working on elements inside grid container

² Positioning content of grid items in primary container (subgrid feature)

³ Line-based placement with CSS Grid

For the record, the CSSWG has already asserted that line names _will_ be inherited. — jhpratt, Jun 09 '18 at 18:45

Overflow/Extend CSS Grid-Areas for Certain Elements

1 Answers1