CodePen Embed - Responsive CSS Grid Magazine Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Krub:400,500,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
    <title>Document</title>
</head>
<body>
    <div class="grid">
       <a class="magazine" href="https://res.cloudinary.com/jduquain/q_auto,f_auto/v1540686705/magazine-2_kngpgy.jpg" target="_blank">Inspiration</a>
        <div class="background"></div>
        
        <h1 class="main-heading">Farm<span>Fresh</span></h1>
        
        <p class="main-para">See how Molly Yeh went from blogging in a tiny New York kitchen to living on a farm and becoming Food Network&apos;s newest&nbsp;star</p>
        
        <img src="https://res.cloudinary.com/jduquain/q_auto,f_auto/v1540686287/squiggle-2_bwd6id.png" alt="squiggle" class="squiggle">
        
        <div class="para-wrap--one">
            <p class="para-one">Parked in front of a laptop, consectetur adipisicing elit. Temporibus optio veritatis, distinctio maiores id, tenetur commodi voluptatum iure nemo ratione quae. Excepturi tenetur eligendi, animi sunt perferendis sequi, repudiandae pariatur. Doloremque odit, a perspiciatis dolorum at numquam corporis incidunt quas sed sunt in cumque. Cum aut placeat quibusdam, hic&nbsp;accusan.</p>
            <p class="para-two">Sunt ratione quo earum voluptatem sint asperiores, optio cupiditate! Eius ratione sint distinctio ad obcaecati, magni dolor illo, vero non, corporis, blanditiis excepturi velit repudiandae ab quas? Officia doloremque repudiandae, minima veniam quam nisi nesciunt iure fugiat animi, temporibus voluptatem molestiae quae aliquid unde, aspernatur culpa quas a. Id,&nbsp;iure!</p>
            <p class="para-three">Ipsum tempore nostrum voluptate, animi, tempora nisi, ratione a fugit blanditiis recusandae dicta distinctio esse cumque tenetur ea. Esse ea provident, commodi vero quibusdam dolores architecto dolor doloribus nisi maiores laboriosam! Adipisci iste iure harum quaerat, quibusdam! Sequi, odit, sit! Non eius sed incidunt nihil quos, at quo nam &nbsp;laudanti.</p>    
        </div>
    
        <img src="https://res.cloudinary.com/jduquain/q_auto,f_auto/v1540686288/cake-2_ar9aud.jpg" alt="cake image" class="cake">
        
        <img src="https://res.cloudinary.com/jduquain/q_auto,f_auto/v1540686287/cupcake-2_yfoipb.jpg" alt="cupcakes" class="cupcake">
    
        <div class="para-wrap--two">
            <p class="para-four">Eum illo modi repellendus iure animi non ducimus at hic nesciunt corporis distinctio consequatur, itaque totam quasi consequuntur id molestias officia dolore. Deleniti perferendis veniam aperiam quisquam. Ratione repellendus id labore et veritatis pariatur dolor nisi quaerat voluptas, error aperiam minus quos placeat, voluptatem blanditiis ex nam consequatur eaque&nbsp;fugit.</p>
            <p class="para-five">Inventore, repudiandae temporibus vel. Molestias dignissimos dolorem veniam provident, minus quibusdam rerum quam illum numquam quisquam, quaerat nostrum labore natus modi illo odit, quae possimus corporis voluptatibus officiis aspernatur laborum fuga sunt, asperiores tempora. Aperiam nesciunt, placeat doloribus vel soluta voluptates dicta tenetur cupiditate, quidem non molestiae ratione veritatis&nbsp;natus!</p>
            <p class="para-six">Laboriosam alias fuga commodi aut quod assumenda officia iusto mollitia delectus eveniet debitis veritati explicabo in labore harum, hic voluptm quisquam accusamus neque deserunt id corporis consectet. Suscipit minus mollitia atque minima adipisci modi eos debitis, culpa error. Voluptate non fugit molesti, consectet sapiente soluta&nbsp;illum.
            </p> 
            <i class="fa fa-arrow-alt-circle-right"></i>
               
        </div>
        
    </div>
    
    <p class="fixed">In the Know</p>

</body>
</html>

:root {
  box-sizing: border-box;
}

*, ::before, ::after {
  box-sizing: inherit;
  text-decoration: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

body {
    font-family: 'Libre Baskerville', serif;
    font-size: .7em;
    max-width: 1280px;
    margin: 0 auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-row: 1fr 1fr 1fr 1fr;
    grid-gap: 1.5em;
    padding: 0 1em 1em 0;
}

.magazine {
    font-family: 'Krub', sans-serif;
    color: #333;
    position: absolute;
    top: 8em;
    right: .5em;
    text-decoration: underline;
}

.magazine:hover, .magazine:focus {
    color: #000;
}

.background {
    background-image: url('https://res.cloudinary.com/jduquain/f_auto,q_auto/v1540686288/hero-2_wjtyec.jpg');
    background-size: cover;
    grid-column: 1 / 4;
    grid-row: 1 / 5;
}

.main-heading {
    font-size: 10em;
    line-height: .9;
    font-family: 'Pacifico', cursive;
    color: #f28495;
    grid-column: 4 / 7;
    grid-row: 1 / 2;
    justify-self: center;
    margin-top: .4em;
}

.main-heading span {
    font-family: 'Krub', sans-serif;
    font-size: .9em;
    color: #e89837;
    letter-spacing: -6px;
    display: block;
    margin-left: .4em;
}

.main-para {
    font-size: 1.25em;
    font-family: 'Krub', sans-serif;
    grid-column: 4 / 7;
    grid-row: 2 / 3;
    width: 80%;
    justify-self: center;
    text-align: center;
}

.squiggle {
    opacity: .7;
    margin-top: 4em;
    display: block;
    grid-column: 5 / 6;
    grid-row: 2 / 3;
    justify-self: center;
    width: 100%;
    padding-bottom: 3em;
}

[class^="para-"] {
    text-indent: 2em;
}

.para-one {
    text-indent: 0;
}

.para-one::first-letter {
    font-size: 3.5em;
    font-family: 'Pacifico', cursive;
    color: #f28495;
    line-height: .8;
    float: left;
    margin-right: .1em;
}

.para-wrap--one {
    grid-column: 4 / 5;
    grid-row: 3 / 5;
}

.cake {
    grid-column: 5 / 6;
    grid-row: 3 / 4;
    width: 100%;
    height: auto;
    transform: translateY(-5%) scaleY(1.1);
}

.cupcake {
    grid-column: 5 / 6;
    grid-row: 4 / 5;
    width: 100%;
    transform: scaleY(1.1) translateY(-15%) rotate(3deg);
    border: 8px solid white;
    box-shadow: 3px 3px 7px rgba(0,0,0,.2);
}

.para-wrap--two {
    grid-column: 6 / 7;
    grid-row: 3 / 5;
    position: relative;
}

.fa-arrow-alt-circle-right {
    font-family: "Font Awesome 5 Free";
    background-color: #fff;
    color: #000;
    font-weight: 900;
    font-size: 2.5em;
    text-align: right;
    display: block !important;
    padding: .5em 0 .5em 0;
}

.fixed {
    font-family: 'Krub', sans-serif;
    font-weight: 700;
    font-size: 1.1em;
    position: absolute;
    color: #fff;
    background-color: #3487ac;
    padding: 2em .6em .2em .5em;
    top: 0;
    right: 5em;
    border-radius: 0 0 10px 10px;
}

@media screen and (max-width: 1280px) {
    
    body {
        font-size: .65em;
    }
    
    
}

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

    .background {
        background-position: 60%;
    }
    
    .para-wrap--one {
        grid-column: 4 / 6;
        grid-row: 3 / 4;
    }

    .cake {
        grid-column: 6 / 7;
        grid-row: 3 / 4;
        height: auto;
        transform: none;
    }

    .cupcake {
        grid-column: 4 / 5;
        grid-row: 4 / 5;
        transform: none;
        box-shadow: none;
        border: none;
    }

    .para-wrap--two {
        grid-column: 5 / 7;
        grid-row: 4 / 5;
        position: relative;
    }

    .main-heading {
        font-size: 7em;
    }
    
    .squiggle {
        margin-top: 6em;
        padding-bottom: 1em;
    }
    
}


@media screen and (max-width: 880px) {
    
    .grid {
        grid-row: repeat(5, 1fr);
    }
    
    .background {
        grid-column: 1 / 4;
        grid-row: 3 / 6;
    }

    .main-heading {
        grid-column: 1 / 7;
    }
    
    .main-para {
        width: 70%;
        grid-column: 1 / 7;
    }
    
    .squiggle {
        width: 20%;
        margin-top: 5em;
        grid-column: 1 / 7;
    }
    
    .para-wrap--one {
        grid-column: 4 / 7;
        grid-row: 3 / 4;
    }

    .cake {
        grid-column: 4 / 6;
        grid-row: 4 / 5;
        width: 100%;
    }

    .cupcake {
        grid-column: 6 / 7;
        grid-row: 4 / 5;
        align-self: center;
        width: 140%;
        transform: translateX(-40%);
        box-shadow: 4px 4px 8px rgba(0,0,0,.5);
    }

    .para-wrap--two {
        grid-column: 4 / 7;
        grid-row: 5 / 6;
    }
 
    
}

@media screen and (max-width: 660px) {
    
    .grid {
        grid-row: repeat(7, 1fr);
        padding: 0 1em 1em 1em;
    }
    
    .background {
        background-position: center top;
        height: 70vw;
        grid-column: 1 / -1;
        grid-row: 3 / 5;
    }
    
    .squiggle {
        padding-bottom: 0;
        margin-top: 6em;
    }
    
    .para-wrap--one {
        grid-column: 1 / -1;
        grid-row: 5 / 6;
        column-width: 20em;
    }

    .cake {
        grid-column: 2 / 5;
        grid-row: 6 / 7;
        width: 100%;
    }
    
    .para-wrap--two {
        grid-column: 1 / -1;
        grid-row: 7 / 8;
        column-width: 20em;
    }

    .cupcake {
        grid-column: 4 / 7;
        grid-row: 6 / 7;
        width: 80%;
        height: 60%;
        object-fit: cover;
        align-self: center;
        transform: translateX(5%);
    }

}

@media screen and (max-width: 460px) {
    
    .background {
        height: 100vw;
    }

    .main-heading span {
        letter-spacing: -3px;
    }
    
    .main-para {
        font-size: 1.1em;
        width: 90%;
    }
    
    .squiggle {
        margin-top: 6em;
        width: 30%;
    }
    
    .fixed {
        font-size: 1em;
        padding: 1em .6em .2em .5em;
        right: 3em;
        border-radius: 0 0 8px 8px;
    }
    
}

View Compiled

This Pen is owned by Jason Duquain on CodePen.

See more by @JasonDuquain on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.