CSS for Magazine Grid in Genesis Sample

magazine-grid-genesis.css

/* Add the following code to your styles.css file or any other custom css file */

/* HOME PAGE GRID */
.magazine {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.magazine .featured-content .entry {
    clear: both;
}

/* TOP GRID */

.featured-top.front-page-section {
    grid-row: 1;
    grid-column: span 4;
}


/* MIDDLE GRID */

.featured-story.front-page-section {
    grid-row: 2;
    grid-column: span 2;
}

.featured-posts.front-page-section {
    grid-row: 2;
    grid-column: span 2;
    /*border-left: 2px solid #ddd;*/
    margin-left: 10px;
    padding-left: 10px;
}

.featured-stories.front-page-section {
    grid-row: 3;
    grid-column: span 4;
}


/* BOTTOM GRID */

.featured-stories .widget-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.featured-stories .widget-wrap .entry {
    margin-bottom: 0;
}

/* RESPONSIVE */

@media only screen and (max-width: 1023px) {
.magazine {
    display: grid;
    grid-template-columns: 1fr;
}

.featured-top.front-page-section {
    grid-row: 1;
}

.featured-story.front-page-section {
    grid-row: 2;
}

.featured-stories.front-page-section {
    grid-row: 3;
}

.featured-posts.front-page-section {
    grid-row: 4;
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
}

.featured-story .widget-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.featured-story .widget-wrap .entry {
    margin-bottom: 0;
}

.featured-posts .widget-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
}

.featured-posts .widget-wrap .entry {
    margin-bottom: 0;
}

}

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

.magazine .wrap {
    padding-left: 0;
    padding-right: 0;
}

.featured-top .widget {
    margin-bottom: 20px;
}

.featured-stories .widget-wrap {
    display: grid;
    grid-template-columns: 1fr;
}

.featured-story .widget-wrap {
    display: grid;
    grid-template-columns: 1fr;
}


.featured-posts .widget-wrap {
    display: grid;
    grid-template-columns: 1fr;
}
}