How to organize my html better without destroying the Grid?

Hi,
If you look at the DOM on https://christophgrothe.github.io/plants/ you will see that it’s organized pretty bad.
That is cause I don’t know how to organize it without destroying my Grid.

An example where it works: The DOM from the header is within , while the whole rest is within . However I could only do this cause I created an extra Grid for .

I would like the create 's and 's within . But if I do this, all the elements within these will not respond to the Grid anymore cause main would not be their parent anymore.

The only possibility I would see I building a lot of different grids for every and every but I don’t think that’s best practise.

Anybody who understands what I mean?? And knows what to do?