- This topic has 2 replies, 2 voices, and was last updated 4 years, 6 months ago by .
- The topic ‘CSS Grid – Site Container, Site-Inner, or Nested?’ is closed to new replies.
These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.
As the title suggests, I'm just wondering how people tackle using CSS grid with Genesis sites.
Given how genesis is structured, we have our site-header, site-inner, site-footer, etc. My understanding of CSS grid, is that if you set the grid to the site-container, you can then tell the header, inner, and footer where to go in the grid, but not the sub-items, as CSS grid can't be applied to the top level, and have a deeper nested item assigned to the grid (I could be wrong).
That said, are people simply creating a grid for the site-inner (the vast majority of any customized content requiring a grid), or are they using a grid for the header / inner / footer, and a nested grid for the inner?
I'm still pretty new to CSS grid, and having a hell of a time getting it to work with Genesis (from scratch seems to work fine, so my understanding of it seems solid), so just looking for some direction. I also think that the pseudo elements of before and after are causing me a headache (they appear to attempt to populate a grid space, but I'm not sure), and I just can't seem to make it work around my existing setup.
Any clarification as to how people are approaching this, links to live genesis sites using css grid, etc, would be greatly appreciated!
I use CSS Grid and flex in all my projects these days. Maybe this will help with understanding how to work it with Genesis: https://victorfont.com/customize-the-genesis-header-with-css-grid-layout/
You can see the CSS grid in the header and footer of this site: https://formidable-masterminds.com/
The site is still under construction and not fully released for another few weeks, but you can examine the header and footer code.
Just wanted to pop back in and say thanks - I finally got over my hurdle and have implemented CSS Grid into my site. Nested / multiple grids was definitely the way to go, and once I realized this was not only okay, but in the spec, I made rapid progress.
Thanks again for pointing me in the right direction by supplying me with something to look at.
© 2023 WPEngine, Inc.