Div that encapsulate child elements in grid

Question

I have html elements (divs) displayed in grid. So in css in body elements I add grid slicing:

body {
   ...
   grid-template-areas:
    'nav nav nav nav'
    'filter filter filter edit'
    'main main main edit'
    'info . buttons edit';
}

so I have div elements nav, filter, edit, main, info and buttons

Now I would like to have (for background reason,... ) div that encapsulate filter, main, info, and buttons div.

So it should be something like this:

<body>
  <div class='nav'>
  </div>
  <div class='index'>
    <div class='filter'>
    </div>
    <div class='main'>
    </div>
    <div class='info'>
    </div>
    <div class='buttons'>
    </div>
  </div>
  <div class='edit'>
  </div>
</body>

my problem is, that I don't know to css this index div, so that all other child could use the grid templates, and that index would encapsulate all of its children.

What I would like to avoid:

To create grid inside grid : It could be that I would need some other encapsulate divs, so this would be impractical.

Div that encapsulate child elements in grid

0 Answers0