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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Widget Columns Using CSS Grid

The CSS examples in this tutorial enable you to display widgets added to 1 widget area in even or uneven responsive columns using CSS Grid.

Even Columns

The 1st example produces any number of even width columns.

This video shows what the code produces :

You can use the CSS with any existing widget area or create a new widget area css or new widget area.

genesis_register_sidebar( array(
    'id' => 'css-grid-widget',
    'name' => __( 'Grid Widget', 'genesis' ),
) );

add_action( 'genesis_after_header', 'front_page_grid_widget' );
function front_page_grid_widget() {

    genesis_widget_area( 'css-grid-widget', array(
        'before' => '<div class="grid-container">',
        'after'  => '</div>',
    ) );
    
}

Then we can use CSS to display any number of widgets in even columns like this :

CSS Grid With Fallback #

Internet Explorer was phased out more than 3 years ago replaced by MS Edge however, if you want to include fallback CSS to support browsers which don’t support CSS Grid, use the following CSS rules as a guide.

.grid-container .widget {
        display: inline-block;
        width: 23.5%;
        margin: 0.5%;
}

@media only screen and (max-width: 960px) {

    .grid-container .widget {
        display: block;
        width: 100%;
    }

}

@supports (display: grid) {

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

}

@supports (display: grid) {
@media only screen and (max-width: 1100px) {

   .grid-container {
        -ms-grid-columns: 1fr 1fr;          
        grid-template-columns: 1fr 1fr;
    }
    
  }

}

@supports (display: grid) {
@media only screen and (max-width: 680px) {

    .grid-container {
        -ms-grid-columns: 1fr 1fr;          
        grid-template-columns: 1fr; 
    }
   
  }

}

You can set any number of columns simply by modifying these values :

grid-template-columns: 1fr 1fr 1fr 1fr;

Or writing the CSS like this :

grid-template-columns: repeat(4, 1fr);

Both declarations produce exactly the same result.

Uneven Columns

Note : MS Edge will be updated with grid on 17/10/2017.

This example shows you how to use CSS Grid to produce uneven columns. On top of this, it also shows you how to control the stacking order on smaller screens using Media Queries.

Here’s the video demo :

.grid-container {
    margin: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 20px;
    grid-template-areas:
        'header header header'
        'content content sidebar'
        'content content sidebar'
        'footer footer footer';
}

.grid-container .widget:nth-child(1) {
    grid-area: header;
    background-color: rgb(191, 191, 191);
}

.grid-container .widget:nth-child(2) {
    grid-area: content;
    background-color: white;
}

.grid-container .widget:nth-child(3) {
    grid-area: sidebar;
     background-color: rgb(169, 100, 234);
}

.grid-container .widget:nth-child(4) {
    grid-area: footer;
    background-color: rgb(172, 231, 64);
}

.grid-container .widget {
    padding: 30px;
}

.grid-container .widget {
    margin: 0;
}

@media only screen and (max-width: 1100px) {

   .grid-container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        'header content' 
        'sidebar footer';
    }
    
}

@media only screen and (max-width: 680px) {

   .grid-container {
        grid-template-columns: 1fr;
        grid-template-areas: 
        'header' 
        'sidebar'
        'content' 
        'footer';
    }
    
}

The CSS displays :

  1. The header widget full width
  2. The content widget 2/3 width
  3. The sideber widget 1/3 width
  4. The footer widget full width

The CSS for media queries @ 1200px displays :

  1. The header & content widgets 1/2 width
  2. The sidebar & footer widgets 1/2 width

The CSS for media queries @ 800px displays all widgets in 1 column and enables you to control the stacking order, in this case moving the sidebar widget before the content widget.

The widgets uses in this example are Custom HTML widgets with a widget name added however you can use any type of widget.

Related Tutorials

  • Display Genesis Featured Page Widgets In Columns Using CSS Grid
  • CSS Grid Template For Genesis

CSS Grid Columns

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.