0

I've created a typical layout using CSS Grid with this structure:

<div class="dashboard">
  <header></header>
  <nav></nav>
  <div class="main-header"></div>
  <div class="main-content"></div>
  <div class="main-footer"></div>
</div>

Now, due to our environment (PHP, Smarty Templates, AngularJS), I would like to split these up into separate components. But here is the issue… I can't wrap an element around grid elements without breaking the layout:

<div class="dashboard">
  <header></header> <!-- component -->
  <nav></nav> <!-- component -->

  <div class="wrapper"> <!-- component -->
    <div class="main-header"></div>
    <div class="main-content"></div>
    <div class="main-footer"></div>
  </div>

</div>

I've experimented with nesting another grid inside of 'wrapper', but that introduces more layout issues, such as improper scrolling. (…and nesting grids doesn't sound like a good idea).

I am wondering if there is some CSS to "pass through" the 'wrapper' div to maintain the css grid properties?

Or is there another way to handle this situation?

Thanks!

Ross
  • 111
  • 1
  • 4
  • 2
    yes there is check this : https://stackoverflow.com/questions/53631740/occupy-width-from-sibling-of-parent-with-css/53631887#53631887 (display:contents; is what you need) another example : https://stackoverflow.com/questions/52191000/ignore-flex-container-children-but-not-grandchildren/52192014#52192014 – Temani Afif Dec 11 '18 at 22:38
  • Excellent! Thank you so much. Sadly, as is usually the case, IE ruins everything. :P – Ross Dec 11 '18 at 23:21

0 Answers0