• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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.

Genesis Featured Page Widget Grid Columns

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems