CODEWITHSUNDEEP
htmlcsscss-grid
user8370684
user8370684

Reputation:

Can an element occupy one CSS grid row and a subelement occupy one of the row's cells?

I'd like to achieve the following effect:

.wrap {
  display: grid;
  grid-template: 2rem 10rem / auto 20rem auto;
}

.a {
  background: orange;
  grid-column: 1 / 4;
  grid-row: 1;
}

.b {
  background: green;
  grid-column: 2;
  grid-row: 1;
}

.c {
  background: lightblue;
  grid-column: 1 / 4;
  grid-row: 2;
  
}
  <div class="wrap">
    <div class="a"></div>
    <div class="b">Title</div>
    <div class="c">This is section C.</div>
  </div>

but using the following HTML instead:

  <div class="wrap">
    <div class="a"><div class="b">Title</div></div>
    <div class="c">This is section C.</div>
  </div>

where .b is inside .a.

In other words, I'd like for element .a to occupy the top row of a CSS grid, but have one of its subelements, .b, to occupy only the middle cell of this same CSS grid row. Is this possible?

Upvotes: 1

Views: 376

Answers (2)

Th3S4mur41
Th3S4mur41

Reputation: 2260

That will work just fine in the future by defining display: subgrid in class .a... But support is still very limited. https://gridbyexample.com/video/subgrid-display-contents/

.wrap {
  display: grid;
  grid-template: 2rem 10rem / auto 20rem auto;
}

.a {
  background: orange;
  grid-column: 1 / 4;
  grid-row: 1;
  display: subgrid;
}

.b {
  background: green;
  grid-column: 2;
  grid-row: 1;
}

.c {
  background: lightblue;
  grid-column: 1 / 4;
  grid-row: 2;
  
}
  <div class="wrap">
    <div class="a">
    <div class="b">Title</div></div>
    <div class="c">This is section C.</div>
  </div>

Upvotes: 0

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

Apply display:grid and grid-template: 2rem 10rem / auto 20rem auto; to a, check this 

.wrap {
  display: grid;
  grid-template: 2rem 10rem / auto 20rem auto;
}

.a {
  background: orange;
  grid-column: 1 / 4;
  grid-row: 1;
  display: grid;
  grid-template: 2rem 10rem / auto 20rem auto;
}

.b {
  background: green;
  grid-column: 2/ 3;
  grid-row: 1;
}

.c {
  background: lightblue;
  grid-column: 1 / 4;
  grid-row: 2;
  
}
 <div class="wrap">
    <div class="a"><div class="b">Title</div></div>
    <div class="c">This is section C.</div>
  </div>

Upvotes: 1

Related Questions