StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

CSS Grid – Site Container, Site-Inner, or Nested?

Welcome!

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.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › CSS Grid – Site Container, Site-Inner, or Nested?

This topic is: resolved

Tagged: , , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • May 29, 2019 at 12:06 pm #491411
    Porter
    Participant

    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!

    Buy me a beer? | Try DigitalOcean VPS Hosting

    May 29, 2019 at 1:57 pm #491412
    Victor Font
    Moderator

    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.

    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    June 13, 2019 at 1:35 pm #491615
    Porter
    Participant

    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.

    Buy me a beer? | Try DigitalOcean VPS Hosting

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘CSS Grid – Site Container, Site-Inner, or Nested?’ is closed to new replies.