Display Genesis Featured Page Widgets In Columns Using CSS Grid

The CSS to display featured page widgets and featured posts in grid columns is different.

This CSS enables you to display 4 featured page widgets, added to 1 widget area, in a grid.

.grid-container {
    margin: 50px;
    display: grid;        
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 20px;
}

Assumes the PHP code for your widget outputs a div named grid-container, otherwise change the .grid-container class in the above CSS rule.

Here’s the result tested using the new Genesis Sample child theme by StudioPress :

You can then add optional CSS for styling and media Queries.

Style Genesis Featured Page Widgets #

Exact CSS used in the above screenshot.

/* Genesis Featured Page Widget 
--------------------------------------------- */

.grid-container .featured-content .entry {
	border-bottom: 1px solid #eee;
	margin-bottom: 20px;
}

.grid-container .featured-content .entry-image {
	height: 100%;
	width: 100%;
}

.grid-container .featured-content .entry-title {
	font-size: 23px;
	font-size: 2.3rem;
	margin-bottom: 15px;
	margin-top: 10px;
}

.grid-container .featuredpage .entry-content p {
    font-size: 14px;
}    
    
@media only screen and (max-width: 1023px) {
    
   .grid-container {
        margin: 50px;
        display: grid;        
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-gap: 20px;
    }    

}

Grid Template Columns #

Modify the value for the grid-template-columns property so you can change the number of widgets displayed in the grid.

grid-template-columns: repeat(auto-fit, minmax(15ch, 1fr));

This enables you to add any number of Genesis Featured Page widgets to 1 widget area and display them in a grid without having to modify the CSS again.

In this case we remove 1 widget and leave 3 which gives us this result without any further CSS modification :

Fallback CSS #

See this example of how to include fallback CSS for browsers which don’t support CSS Grid.