Genesis Header
Many questions asked on both the Studio Press Community Forum and Genesis WordPress Facebook page relate to refining a child theme's default header. Since we're working with the Genesis sample theme in this tutorial, we know that the default header initially stretches the full width of the page. Add a header-right widget to the theme and the header is split roughly into a 1/3 - 2/3 ratio with the title area in the left third and the widget area in the right 2/3 space. You can see that configuration depicted in Understanding the Genesis Framework Site Header Layout
Other themes use three distinct sections in the header with a left and right menu on either side of a centered logo. Examples of this can be seen in the Studio Press Modern Studio Pro and community marketplace themes like Refined Pro and the more complex Elegance Pro that features multiple rows in the left and right menu areas.



Another popular question is "How can I center the logo in the header?" To answer these questions, we're going to create a flexible header for the Genesis Sample theme using CSS Grid Layout that can be easily adopted to support multiple layouts. Hopefully, you'll be able to apply this information to any Studio Press developed Genesis theme.
The reason I specify Studio Press developed theme is because I've noticed lately there's a tendency with some community marketplace Genesis theme developers to overwrite Genesis Framework generated code with their own variations. Also, if you use a page builder or CSS assistant plugin with your Genesis installation, this tutorial may not provide the results as displayed in this article.
What is CSS Grid Layout?
CSS Grid Layout is a CSS layout method designed for the two-dimensional layout of items on a webpage or within an application. The grid system is optimized for user interface design. In the grid layout model, grid container children can be positioned into arbitrary slots in either a predefined flexible or fixed-size layout grid. As of this writing, all modern browsers, with the exception of IE and Edge, support the current CSS Grid draft specification. But, don't worry. An updated Edge is supposed to be released in the near future that supports the latest grid specification. The CSS Grid specification was first presented in 2012. It was initially developed by Microsoft, and IE actually supports an older version of the specification.
There's one important item to note. Chrome is a wildly popular browser that many developers use for site development. For CSS Grid development, please use Firefox. Firefox is the only browser that can highlight CSS grids with its inspect element tool. When you inspect a grid object in Firefox, the inspect element tool will show a little grid-styled hash mark in the CSS panel as shown in this example (indicated by the cursor):
Clicking this hash mark toggles the grid outline on the screen so you can visualize what you are doing.
Understanding the fr Unit
This tutorial uses the fr unit to define the grid. The fr unit is a new dimensional unit created specifically for CSS Grid Layout. With the fr unit, you can create flexible grids without having to calculate percentages or depend on column classes. The fr unit represents a fraction of the available space in the grid container. You'll get a better understanding of how the fr unit works when you watch the first video.
Define the Grid Layout
To clarify our grid's construction, I've removed the default content display actions that enable the site title and description to show on the screen. I've also removed any widgets from the header-right widget area and added a little top margin to the site-header class to push the grid down a little so we can clearly see the outline. This allows us to build the grid with a fresh view. If you want to follow this tutorial step-by-step in your own environment, to remove the default actions, add the following to functions.php:
One other suggestion I'll make before we get started is to uncheck "Show Toolbar when viewing site" on your user profile so the WordPress admin bar doesn't muddy the grid display.
Now that we have the preliminaries out of the way, please go ahead and watch this video to learn the first step to defining your grid.
Keep in mind that the changes we made through the inspect element tool are non-destructive, meaning they are not permanent. All we've done in the video is demonstrate how the CSS affects the grid layout. If you want to make these changes permanent, you have to add the CSS changes to your child theme's style.css. The updated code for the Genesis Sample theme's style.css follows:
Now that you understand the basics for defining your grid, I hope you can see how easy it is to refine your layout to meet your specific aesthetic.
Grid Line Placement
Content placement in a CSS Grid Layout is extremely flexible. You layout content either through auto placement, line positioning, or named grid areas. For more readable code, my preference is named grid areas, which we use in this tutorial to determine our content placement. Let's take a look at line positioning first so we can understand the differences.
Grids always have lines. Lines are either vertical or horizontal. They are always indexed starting with 1. The CSS Grid Layout respects directional language constructs. So with a left-to-right (LTR or sinistrodextral) language like English, the first grid object will be on the left. Objects are indexed from the opposite direction with a negative index. In the example grid below, the grid object labeled "4" could be referenced as column line -1. For right-to-left (RTL or dextrosinistral) languages such as Arabic and Hebrew or derived systems such as the Persian, Urdu, and Yiddish, the indexing system is reversed.
This grid demonstrates line placement:
Now here's the source code. First the HTML, then the CSS:
If we did nothing else with our grid at this point, any content inserted into it would be auto placed, first either from the left or right across the columns depending on the language direction, then the rows would begin to be filled out from top to bottom.
But let's say we want to stretch the first content area across the entire row. With line positioning, we can add some CSS and to facilitate this, let's add a class to the first div, and because there's going to be space after the #4 grid area, let's also add a class to that div to fill in the empty space.
Here's the code for the stretch grid. First the HTML, then the CSS:
Named Grid Areas and Anonymous Text
For this section, I've enabled the display of the title area content by commenting out the code added earlier to functions.php. I've also added a custom menu to the header right widget area, which is a very common user defined configuration with Genesis themes. Doing so produced an unexpected result that will be a common issue with Studio Press themes and CSS Grid Layout. This unexpected result is directly related to how Studio Press themes address float clearing by adding an empty space to the ::before and ::after CSS pseudo-elements.
If you are not familiar with CSS pseudo-elements, they are used to style specified parts of an associated element. For example, they can be used to: style the first letter, or line, of an element, or, insert content before, or after, the content of an element. Pseudo-elements include:
- ::afterâInsert something after the content of an element
- ::beforeâInsert something before the content of an element
- ::firstâletter Selects the first letter of an element
- ::first-lineâSelects the first line of an element
- ::selectionâSelects the portion of an element that is selected by a user
To learn more about CSS pseudo-elements, visit CSS Pseudo-elements.
Let's watch the next video to learn about named grid areas and how to handle anonymous text.
CSS Grid Layout is pretty cool, isn't it? I believe it's a real game changer when designing websites, especially with mobile responsive design. It's reminiscent of the old table layout structures so popular in the early days of web design, but without their inherent shortcomings. Normally once the Document Object Model (DOM) for a webpage is defined in the browser, it is very difficult to reorder elements to suit a particular purpose. With CSS Grid Layout, reordering elements becomes very easy, especially when using grid-template-areas.
One other example to consider is to use CSS Grid Layout for the Genesis Content-Sidebar wrap. There are a lot of questions about how to change the order of the sidebar and content when viewed on a phone. Grid Areas make changing the order of the content and sidebar displays easy. You just assign an element to a different grid area in your media queries. Content areas can be moved around like magic and your future designs will be limited only by your imagination.
If we were to take some of the CSS we created for this tutorial and wrap it in a feature query, we can leave the Genesis delivered CSS intact and create custom CSS just for new browsers. The code we created for .site-header > .wrap would then look like:
Feature Queries and CSS Grid
But what about older browsers that don't support CSS Grid Layout and never will? For older browsers, we use feature queries. With feature queries, CSS has a built-in way for dealing with older browsers that don't support new CSS. If you've ever used Modernizer, you may have an idea of how you might use it; and, if you've ever used a media query, you'll understand how to implement it.
The CSS syntax to use to test if a browser can support CSS Grid is simply:
If we were to take some of the CSS we created for this tutorial and wrap it in a feature query, we can leave the Genesis delivered CSS intact and create custom CSS just for new browsers. The code we created for .site-header > .wrap would then look like:
By using a feature query as above, old browsers will display the Genesis Header as delivered out of the box and new browsers will display the Genesis header with CSS Grid Layout.
Resources
Here are some great resources for learning more about CSS Grid Layout.
Rachel Andrew's Grid By Example
A Complete Guide to Grid
Posts Grid in Genesis using CSS Grid by Sridhar Katakam