Grid Area and Grid Template Area Practice


by Jeremy Caudle
code

CSS Grid has been so interesting to me ever since I heard about it via Rachel Andrew’s book, Get Ready for CSS Grid Layout. It got me excited about working with CSS again. I haven’t made anything amazing with it, but it has helped me a lot in making attractive layouts. Today’s practice however, is not one of those! It’s just practice.

Random Industries

Article Title

Suspendisse hendrerit risus vitae fermentum viverra. Aenean nisi lorem, maximus vel sem ut, iaculis ornare leo. Sed dignissim justo vel mattis rutrum. Fusce porta non orci vel accumsan. Vestibulum elementum, orci at ornare interdum, quam metus tempus ligula, sit amet tincidunt erat dolor at metus. Ut molestie fringilla sem nec interdum. Curabitur blandit posuere libero, et fermentum nisl. Quisque commodo orci non leo sagittis viverra. Ut ipsum dolor, posuere vitae lobortis non, ullamcorper id arcu. Maecenas tincidunt arcu ac tempor laoreet.

View the code:

HTML and JS 
<div id="top" class="code-block">
            <header>Random Industries</header>
            <nav><a href="#">About</a> <a href="#">Blog</a> <a href="#">Contact</a></nav>
            <article>
                <h1>Article Title</h1>
                <p>Suspendisse hendrerit risus vitae fermentum viverra. Aenean nisi lorem, maximus vel sem ut, iaculis ornare leo. Sed dignissim justo vel mattis rutrum. Fusce porta non orci vel accumsan. Vestibulum elementum, orci at ornare interdum, quam metus tempus ligula, sit amet tincidunt erat dolor at metus. Ut molestie fringilla sem nec interdum. Curabitur blandit posuere libero, et fermentum nisl. Quisque commodo orci non leo sagittis viverra. Ut ipsum dolor, posuere vitae lobortis non, ullamcorper id arcu. Maecenas tincidunt arcu ac tempor laoreet. </p>
            </article>
            <aside>
                <h3>Did you know …</h3>
                <ul>
                    <li>Random fact</li>
                    <li>Pointless fact</li>
                    <li>False information</li>
                </ul>
            </aside>
            <footer><small>© Random Industries | <a href="#">Privacy Policy</a> | <a href="#top">Top</a></small></footer>
   
        </div>
CSS 
.code-block {
                width: clamp(16em, 90vw, 60em);
                margin: 1rem auto;
                background-color: floralwhite;
                padding: 1rem;
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            }

            .code-block h2, .code-block h3, .code-block p, .code-block ul {
                margin: 0 0 1rem 0;
            }

            .code-block > * {
                padding: 1rem;
            }

            .code-block header { 
                background-color: rgb(255, 82, 82);
                color: white;
                }
            .code-block nav { 
                background-color: blue;
                color: white;
                }

            .code-block nav a {
                color: white;
                font-weight: 500;
                text-decoration: none;
            }

            .code-block nav a:visited {
                color: gray;
                text-decoration: none;
            }
            
            .code-block nav a:active {
                color: black;
                text-decoration: none;
            }
            
            .code-block article { 
                background-color: whitesmoke;
                }
            .code-block aside { 
                background-color: rgb(178, 195, 211);
                }
            .code-block aside ul {
                padding-left: 0;
                list-style-position: inside;
            }

            .code-block footer { 
                background-color: floralwhite;
                text-align: center;
                }

            @supports (display: grid) {
                .code-block {
                    display: grid;
                    gap: 1rem;
                    grid-template-areas:
                        "header header header"
                        "nav nav nav"
                        "article article aside"
                        "article article ."
                        "footer footer footer"
                }

                .code-block header {
                    grid-area: header;
                }
                .code-block nav {
                    grid-area: nav;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-evenly;
                    align-items: center;
                }
                .code-block aside {
                    font-size: .8em;
                    grid-area: aside;
                }
                .code-block article {
                    grid-area: article;
                }
                .code-block footer {
                    grid-area: footer;
                }

                @media (min-width: 30em) {
                    .code-block {
                    grid-template-areas:
                        "header header header . ."
                        "header header header . ."
                        ". . nav nav nav"
                        "article article article aside aside"
                        "article article article aside aside"
                        "article article article aside aside"
                        "footer footer footer footer footer";
                    }

                }
            }

Tags