css grid with nested div structure

Question

I try to build a CSS Grid where some entries are nested in a div structure:

like that it works:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-template-rows: 1;
}

.cent {
  grid-column: 2;
  grid-row: 1;
}

.left {
  grid-column: 1;
  grid-row: 1;
}

.right {
  grid-column: 3;
  grid-row: 1;
}

<div class="wrapper">
  <div class="cent">center</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

But if I start to nest my structure I can't access the column I want:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-template-rows: 1;
}

.cent {
  grid-column: 2;
  grid-row: 1;
}

.left {
  grid-column: 1;
  grid-row: 1;
}

.right {
  grid-column: 3;
  grid-row: 1;
}

<div class="wrapper">
  <div class="cent">center</div>
  <div>
    <!-- in reality there would be more divs and rows, I already have problems with one -->
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</div>

Can somebody give me tip on how to achieve the grid with a nested structure? Or do I have a complete wrong approach? (Unfortunately changing the order and structure of the elements in code would be very time consuming)

score 7 · Accepted Answer · edited Jan 15 '18 at 06:38

7

Nested grids are possible, but make sure that the parent of the innermost divs does itself have display:grid. If you don't,

As these items are not direct children of the grid they do not participate in grid layout and so display in a normal document flow.

(from MDN: Basic concepts of grid layout.)

So all you need to do is assign those styles to the parent of the left and right divs.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-template-rows: 1;
}

.cent {
  grid-column: 2;
  grid-row: 1;
}

.cent + div {   /* this works for now, but you should choose a better selector for this one */
  display: grid;
  grid-column: 1 / 4;
  grid-row: 1;
}

.left {
  grid-column: 1;
  grid-row: 1;
}

.right {
  grid-column: 3;
  grid-row: 1;
}

<div class="wrapper">
  <div class="cent">center</div>
  <div>
    <!-- in reality there would be more divs and rows, I already have problems with one -->
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</div>

edited Jan 15 '18 at 06:38

VXp

11,598
6
31
46

answered Jan 12 '18 at 13:12

Mr Lister

45,515
15
108
150

Is it a good idea in general to use such kind of a nested grids? For example if I'm trying to build a table which can contain hundreds of rows, and each of the row will be a nested grid with list of columns. Is it potential performance issues? – Liauchuk Ivan Nov 14 '19 at 18:08
@LiauchukIvan I think that depends more on the amount of data than the nesting of the grids. I mean, hundreds of rows may be a performance problem even without nesting! You may have to do some tests. – Mr Lister Nov 14 '19 at 20:43
1

Unfortunately, the answer is incorrect. Since it does not allow to "access" tracks from the parent. It just randomly coincided "close enough", which they do not if you check the layout debugger. The actual feature that will allow passing the template definition is called [subgrids](https://www.w3.org/TR/css-grid-2/#subgrids), and to date is only available in Firefox. – Andrey Jun 22 '21 at 17:08
@Andrey Can you post an answer that demonstrates your remark, even if it does work only in FF? – Mr Lister Jun 25 '21 at 08:21

css grid with nested div structure

1 Answers1