This tutorial shows you how to modify any widget area in any Genesis child theme which uses flexible widgets. You can use CSS Grid to display any number of widgets in columns.
In this example, we’ll modify the front page 2 widget area in the Infinity Pro child theme by StudioPress so it displays each widget in a column like this :
There’s 2 steps :
Step 1 : Modify the PHP code located between lines 72 – 75 from this :
genesis_widget_area( 'front-page-2', array(
'before' => '<div id="front-page-2" class="front-page-2"><div class="solid-section flexible-widgets widget-area fadeup-effect' . infinity_widget_area_class( 'front-page-2' ) . '"><div class="wrap">',
'after' => '</div></div></div>',
) );To this :
genesis_widget_area( 'front-page-2', array(
'before' => '<div id="front-page-2" class="front-page-2"><div class="solid-section widget-area fadeup-effect"><div class="wrap"><div class="container">',
'after' => '</div></div></div></div>',
) );This removes the flexible-widgets class and infinity_widget_area_class function which controls the classes for the flexible widgets CSS.
Step 2 : Add the following CSS to the end of your child themes style.css file and clear caching :
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat( 5, 1fr );
}
@media only screen and (max-width: 960px) {
.container {
display: grid;
grid-template-columns: 1fr;
padding: 20px;
}
}Add support for CSS Grid in Internet Explorer if you wish ( Untested ) :
.container {
display: grid;
display: -ms-grid;
grid-gap: 10px;
grid-template-columns: repeat( 5, 1fr );
-ms-grid-columns : 1fr 1fr 1fr 1fr 1fr;
}
@media only screen and (max-width: 960px) {
.container {
display: grid;
display: -ms-grid;
grid-template-columns: 1fr;
-ms-grid-columns : 1fr;
padding: 20px;
}
}Change Number Of Widgets
To display more or less than 5 widgets, change the number 5 in this line of the CSS :
grid-template-columns: repeat( 6, 1fr );The above example will display 6 widgets in columns as long as 6 widgets have been added to the widget area. Otherwise, another option is to use minmax like this :
Auto Fit
Another option is to use minmax.
Replace this CSS declaration :
grid-template-columns: repeat( 5, 1fr );With this :
grid-template-columns: repeat( auto-fit, minmax( 15ch, 1fr ) );Or this :
grid-template-columns: repeat( auto-fit, minmax( 200px, auto ) );This automatically fits the number of widgets to the container regardless of how many widgets are added to the widget area so no need to modify the CSS.
Hey Brad,
I’m using the InfinityPro theme and its on the homepage. In the Front Page 2 section I have a Custom HTML widget to produce some text, then a slider widget for testimonials, followed by a Custom HTML widget for a button. I want the button to be below the testimonials except the layout won’t let me.
Thanks for your help with this.
Sent via email
I think you have made a mistake with this tutorial. The title should read, “Modify Flexible Widgets To Display Any Number of Widgets Into a Row”, rather than, “Modify Flexible Widgets To Display Any Number of Widgets In Columns”. This creates a row of widgets rather than a column.
Would you be so kind as to provide a tutorial that creates a single column for three widgets? The flexible layout forces one widget to be followed by two. I want to have three widgets placed one after the other vertically. Can you please help me?
Hi Ian. Which theme are you using and which page on your site are you referring to?