1

I'm loving the new CSS Grid feature, but I'm running into a limitation with responsive layouts and how Drupal blocks things together. To explain one use case simply, I have a right sidebar that breaks into two components, a search form and advertising. On tablet and desktop, those should be stacked into the same sidebar. But on mobile, I want to break that search form component out and put it above the content. I put together a wireframe example that shows how things move around. However, when I start to put this together in Drupal (8) with blocks, regions in my custom theme (which I made as a subtheme of classy), Drupal organizes them into nested HTML divs and other elements (ASIDE, MAIN, HEADER, etc). So the question is do I scrap base theming and keep things really really flat, like in the wireframe example, or is there a way to get a sub-element into a parent grid area, or do I need to delve into subgrids?

Thanks!

Improve this question

1 Answer 1

Reset to default
4

I'd update theme's .info to add a specific region for your search block. It should enable you to make it a normal grid area as all the rest regions and apply all the theming you want.

Improve this answer
1
  • 1
    Oh, that's brilliant! I didn't think of that. Let me go off and try that. Thanks!
    – Purdy
    Commented Mar 6, 2018 at 15:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.