When using CSS Grid is it possible to have a child expand beyond their parent's grid placement?

Question

I have a simple CSS grid with 5 columns and two rows. The first row contains 5 elements but I want the second row to contain the 5th element's child for all 5 columns, is this possible?

I want the red element (the child of element 5) to be 100% the width in the row below all the other elements.

.container {
  display: grid;
  grid-template-columns: [line1] min-content [line2] min-content [line3] min-content [line4] max-content [line5] max-content [end];
  grid-template-rows: [row1-start] 10% [row1-end row2-start] auto [row2-end];
  column-gap: 1em;
  row-gap: 2em;
}
.element1 {
  max-height: 2em;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
  background-color: pink;
}
.element2 {
  max-height: 2em;
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
  background-color: blue;
}
.element3 {
  max-height: 2em;
  grid-column-start: 3;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 1;
  background-color: orange;
}
.element4 {
  max-height: 2em;
  grid-column-start: 4;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 1;
  background: yellow;
}
.element5 {
  grid-column-start: 5;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 1;
  justify-self: end;
  background-color: purple;
}

.element-sub5 {
  grid-column: 1 / 5;
  grid-row: 2;
    border: 1px solid red;
  background-color: red;
    padding: 0 1em;
    margin-top: 2.5em;
  width: 100%;
  height: 10em;
  float: left;
}

<div class="container">
  <div class="element1">
  element1
  </div>
  <div class="element2"> 
  element2
  </div>
  <div class="element3">
  element3
  </div>
  <div class="element4"> 
  element4
  </div>
  <div class="element5">
  element5
    <span class="element-sub5">
      REALLY BIG BOX OF TEXT
    </span> 
  </div>
</div>

Example layout

May be a duplicate of https://stackoverflow.com/questions/58459731/align-nested-child-elements-to-css-grid — daggett, May 11 '22 at 22:30
You can size and position the element relative to the container by setting its position to absolute and the container to position relative, and defining the container's width (e.g. by width: fit-content) but I'm not clear how you want element5 (the parent) to be sized. — A Haworth, May 11 '22 at 22:51
@AHaworth The 5th element (purple) is a little larger than the other 4. But the main goal is to have sub-5 (red) take up the whole width of elements 1-5 in the row under them. I have found comments about display: contents || display: table and I am trying them now. I update if either of them work. — YmeYnot45, May 12 '22 at 15:20
@daggett It isn't a duplicate. In that question they are still displaying their sub items only under the parent item. His "middle row", is over elements 4,5,6. He created an extra div to be the parent. In my code 4,5,6 would have to be inside the div of #3, yet also display under #1 & #2. — YmeYnot45, May 12 '22 at 16:03

score -1 · Answer 1 · answered May 11 '22 at 21:12

-1

It’s possible to set up a grid like this but only if your 5th items element isn’t inside it…

CSS

.parent { 
display: grid; 
grid-template-columns: repeat(5, 1fr); 
grid-template-rows: repeat(2, 1fr); 
grid-column-gap: 0px;
grid-row-gap: 0px; 
}
.div1 { grid-area: 1 / 1 / 2 / 2; } 
.div2 { grid-area: 1 / 2 / 2 / 3; } 
.div3 { grid-area: 1 / 3 / 2 / 4; } 
.div4 { grid-area: 1 / 4 / 2 / 5; } 
.div5 { grid-area: 1 / 5 / 2 / 6; } 
.div6 { grid-area: 2 / 1 / 3 / 6; }

HTML

<div class="parent"> 
<div class="div1"> </div> 
<div class="div2"> </div> 
<div class="div3"> </div> 
<div class="div4"> </div> 
<div class="div5"> </div> 
<div class="div6"> </div> 
</div>

answered May 11 '22 at 21:12

daggett

239
2
4
15

Yea, your answer doesn't help because the entire point of the question was predicated on the fact that I can't take element-sub5 out of element 5. It is performing a css checkbox hack with classes instead of ids, element-sub5 is a help menu that appears when you click on element 5. That is why I need it to be the full width. Otherwise it just runs off the screen to the right which is both ugly and not practical for a help box. – YmeYnot45 May 12 '22 at 14:54
Ah ok I see what you mean. Can you not just flatten your div structure with some JS to render it when you need? – daggett May 13 '22 at 10:11
1

This is part of an entire De-Jquery project. This is one of the things we are trying with just HTML & CSS before we use Lit on the rest. Part of the problem is this is an existing site with 10 years of uses, who don't want the appearance or function to change which hamstrings editorial options. I thank you for your attempts. I'm moving to a flex box approach. Where I use a relative position while increasing the bottom margin of the parent to make space for the child help box to appear. – YmeYnot45 May 13 '22 at 14:41

When using CSS Grid is it possible to have a child expand beyond their parent's grid placement?

1 Answers1