p Click on Article Block to Toggle Featured
section.article-grid
    -var index = 1
    while index <= 30
        article
            h1 Article #{index}
            p Bacon ipsum dolor amet short ribs jerky beef ribs, burgdoggen hamburger pancetta tongue turducken leberkas shoulder jowl turkey salami kielbasa brisket. Bresaola tri-tip shankle leberkas, doner spare ribs tenderloin kevin chicken. Jowl boudin pork belly turkey porchetta corned beef shank spare ribs biltong picanha short ribs. Ham brisket salami meatloaf andouille. Landjaeger bacon picanha drumstick rump. Picanha bresaola tri-tip ground round, alcatra short loin venison pork shankle t-bone sirloin strip steak ham pork belly corned beef.
        - index = index + 1
        
p <strong>note:</strong> Images from <a href="https://unsplash.it">unsplash.it</a>
View Compiled
@breakpoint: 500px;

body {
    font-size: 16px;
    margin: 1em;
}

.article-grid {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row dense;
    article {
        align-self: stretch;
        cursor: pointer;
        border: 2px #333 solid;
        border-radius: 5px;
        grid-column: auto / span 1;
        padding: 1em;
        align-content: stretch;
        &:hover {
            box-shadow: #ddd 2px 2px 4px 4px;
        }
        img {
            display: none;
        }
        h1 {
            margin: 0;
            font-size: 1.4em;
        }
        p {
            margin: 0;
            max-height: 2.4em;
            overflow: hidden;
        }
        @media (max-width: @breakpoint) {
            grid-column: span 3;
        }
        &.flood {
            font-size: 1.5em;
            grid-column: auto / span 2;
            grid-row: span 3;
            display: inline-grid;
            grid-template-columns: repeat(5, 1fr);
            grid-gap: 1em;
            @media (max-width: @breakpoint) {
                grid-column: span 3;
                grid-row: span 1;
            }
            background-color: #eef;
            background-image: url("https://unsplash.it/400/300/?random");
            background-size: cover;
            color: #fff;
            h1 {
                padding: 0.5em;
                background-color: rgba(33,33,33,0.5);
                grid-column: 2 / span 5;
                grid-row: 2;
                border-radius: 5px;
                text-shadow: #333 2px 2px;
            }
            p {
                padding: 0.5em;
                text-shadow: #333 2px 2px;
                background-color: rgba(33,33,33,0.5);
                overflow: display;
                max-height: inherit;
                grid-column: 2 / span 5;
                grid-row: 4;
                border-radius: 5px;
            }
        }
        &.featured {
            grid-row: span 2;
            @media (max-width: @breakpoint) {
                grid-column: span 3;
                grid-row: span 1;
            }
            background-color: #efe;
            h1 {
                text-align: center;
                margin-bottom: 1em;
            }
            p {
                overflow: display;
                max-height: inherit;
                text-align: "justify";
            }
        }
    }
}

View Compiled
$(document).ready(function() {
    [1,7,12,16,21].forEach(function(index) {
        $(`article:nth-child(${index})`).addClass("flood");
    });
    [2,3,9,11,18,23,25,27].forEach(function(index) {
        $(`article:nth-child(${index})`).addClass("featured");
    });
    $("article").on("click", function() {
        if ($(this).hasClass("featured")) {
            $(this).removeClass("featured").addClass("flood");
        } else if ($(this).hasClass("flood")) {
            $(this).removeClass("flood");
        } else { 
            $(this).addClass("featured");
        }        
    });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js