More Grid Area Practice


by Jeremy Caudle
notes code

I wanted to do a bit more practice with grid areas today. I found out that I can't use a variable when definiing a grid area, or at least I couldn't figure it out today. I wonder if that would be useful in any way.

Jerry Lawson

Gerald Anderson "Jerry" Lawson was an American electronic engineer, and one of few African-American engineers in the video game industry at that time. He is known for his work in designing the Fairchild Channel F video game console as well as pioneering the commercial video game cartridge.
Text and Photo Source: Wikipedia

Thanks Jerry. :)

View the code:

HTML and JS 
<div class="codedoodle-block">
        <h1>Jerry Lawson</h1>
        <p>Gerald Anderson "Jerry" Lawson was an American electronic engineer, and one of few African-American engineers in the video game industry at that time. He is known for his work in designing the Fairchild Channel F video game console as well as pioneering the commercial video game cartridge.<br /><small>Text and Photo Source: <a href="https://en.wikipedia.org/wiki/Jerry_Lawson_(engineer)">Wikipedia</a></small></p>
        <div></div><div></div><div></div><div></div><div></div><div></div>
        <footer><em>Thanks Jerry. :)</em></footer>
    </div>
CSS 
/* Variables */

        :root {
            --headline: headline;
            --footer: footer;
        }

        /* Code Block styles */

        div.codedoodle-block {
            margin: 3rem auto;
            width: auto;
            max-width:60%;
            height: auto;
            background-color: transparent;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .codedoodle-block p {
            margin: 1rem auto;
            max-width: 40em;
            font-size: 16px;
            line-height: 1.4;
            color: #999;
        }

        .codedoodle-block div {
            display: flex;
            flex-flow: row;
            justify-content: center;
            align-content: center;
            background-image: url('https://jeremycaudle.com/ygg/resources/jerrylawsonca1980.png');
            background-size: cover;
            background-position: 50% 50%;
        }

        .codedoodle-block div:nth-of-type(1) {
            background-color: red;
            background-blend-mode: multiply;
        }

        .codedoodle-block div:nth-of-type(2) {
            background-color: green;
            background-blend-mode: screen;
        }

        .codedoodle-block div:nth-of-type(3) {
            background-color: blue;
            background-blend-mode: screen;
        }

        .codedoodle-block div:nth-of-type(4) {
            background-color: yellow;
            background-blend-mode: multiply;
        }

        .codedoodle-block div:nth-of-type(5) {
            background-color: orange;
            background-blend-mode: multiply;
        }

        .codedoodle-block div:nth-of-type(6) {
            background-color: orangered;
            background-blend-mode: screen;
        }

        @supports (display:grid) {

            .codedoodle-block {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                grid-template-rows: 5rem 1fr 100px;
                grid-gap: 1rem;
                grid-template-areas: 
                "headline a a b c"
                "headline a a d e"
                "headline footer footer f g"
            }

            .codedoodle-block p {
                grid-area: a;
            }
            .codedoodle-block h1 {
                grid-area: headline;
                writing-mode: sideways-lr;
                text-transform: uppercase;
                font-size: 3em;
                margin: 0;
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
            }

            .codedoodle-block aside {
                grid-area: b;
            }

            .codedoodle-block footer {
                grid-area: footer;
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-content: center;
                text-align: center;
                transform: rotate(-10deg);
            }

            .codedoodle-block div:nth-of-type(1) {
            grid-area: b;
        }

        .codedoodle-block div:nth-of-type(2) {
            grid-area: c;
        }

        .codedoodle-block div:nth-of-type(3) {
            grid-area: d;
        }

        .codedoodle-block div:nth-of-type(4) {
            grid-area: e;
        }

        .codedoodle-block div:nth-of-type(5) {
            grid-area: f;
        }

        .codedoodle-block div:nth-of-type(6) {
            grid-area: g;
        }

            @media (max-width: 778px) {
                
                .codedoodle-block {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: minmax(3em, 7em) auto minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);
                grid-template-areas: 
                "headline headline headline"
                "a a a"
                "b c d"
                "e f g"
                "footer footer footer"
            }

                .codedoodle-block h1 {
                    writing-mode: horizontal-tb;
                }

            }

        }

Tags