"Design a Magazine Layout" code checker doesn't recognise grid area

HTML-CSS
1

Tell us what’s happening:

The code-checker says I don’t have a grid area with the same name as the classes .title, .feature-article and .cover-image, but I do. I’ve gone back and forth on this and can’t find a reason as to why the code checker doesn’t recognise my code correctly.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Magazine Layout</title>
        <link rel="stylesheet" href="./styles.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"/>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"/>

    </head>

    <body>
        <main class="magazine-cover">

            <header class="title"><h1>Adventure Awaits</h1></header>

            <section class="feature-article">
                <h2>Top 10 Exotic Destinations for 2024</h2>
                <p>Discover the most breathtaking places to visit this year, from hidden beaches to mountain retreats. Our guide takes you through the best spots for your next adventure.</p>
            </section>

            <section class="small-article1">
                <h2>Gear Up: Must-Have Gadgets</h2>
                <p>Check out the latest tech and gear to make your travels more exciting and comfortable.</p>
            </section>

            <section class="small-article2">
                <h2>Meet the Explorers</h2>
                <p>Get to know the modern adventurers who are pushing the boundaries of exploration.</p>
            </section>

            <section class="cover-image">
                <img loading="lazy" src="https://images.travelandleisureasia.com/wp-content/uploads/sites/2/2024/08/14091115/hallstatt-austria-1.jpeg" alt="picturesque austrian village located between the austrian alps and a river"/>
            </section>
            
        </main>
    </body>
</html>

/* file: styles.css */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    position: relative;
    top: 0;
    left: 0;
    font-family: Baskervville, serif;
    color:  rgb(20, 30, 40);
    background-color: linen;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

h1 {
    font-family: Anton, sans-serif;
    font-size: 4rem;
    color: rgb(20, 30, 40);
}

h2 {
    font-size: 2rem;
    font-weight: bold;
    font-family: Raleway, sans-serif;
}

p {
    font-size: 1.5rem;
    color: black;
    text-align: left;
}

.magazine-cover {
    position: relative;
    margin: 2rem 2rem;
    padding: 1.5rem;
    width: 80%;
    max-height: 80vh;
    background-color: white;
    border-radius: 2%;
    box-shadow: 5px 5px 50px 10px rgb(173, 161, 148);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr 1fr;
    gap: 10px;
    grid-template-areas:
    "title title title" "feature-article feature-article cover-image" "small-article1 small-article2 cover-image";
}


section[class*="article"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.5rem;
    background: linear-gradient(to bottom, #ebebeb, #f9f9f9);
    padding: 10px;
}

.title {
    text-align: center;
    grid-area: title;
    grid-column: 1/-1;
    grid-row: 1;
}

.feature-article {
    grid-area: feature-article;
    grid-column: 1 / 3;
    grid-row: 2; 
    background: linear-gradient(to bottom, rgb(233, 228, 223), #f9f9f9) !important;
}

.small-article1 {
    grid-area: small-article1;
    grid-column: 1;
    grid-row: 3;
}

.small-article2 {
    grid-area: small-article2;
    grid-column: 2;
    grid-row: 3;
}

.cover-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5%;
    grid-area: cover-image;
    grid-column: 3/-1;
    grid-row: 2/3;
    background: linear-gradient(to bottom, #ebebeb, #f9f9f9);
}

img {
    position: relative;
    top: 50%;
    width: 100%;
    max-width: 600px;
    object-fit: cover;
    border-radius: 2%;
}



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

    h2 {
        font-size: 1.8rem;}

    p {
        font-size: 1.4rem;}

        section[class*="article"] {
            gap: 1rem;}

    .magazine-cover {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr 1fr auto-fill;
    }
    .feature-article, .cover-image {
        grid-column: 1/-1;
    }

    .small-article1 {
        grid-column: 1;
    }

    .small-article2 {
        grid-column: 2;
    }

    .cover-image {
        display: block;
        grid-row: 4/-1;
        max-height: 60%;
    }

    img {
        top: 0;
        max-height: 100%;
        object-fit: contain;
    }

}

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

    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 1.6rem;}

    p {
        font-size: 1.3rem;}

        section[class*="article"] {
            gap: 0.5rem;}

    .magazine-cover {
        grid-template-columns: 1fr;
        grid-template-rows: auto repeat(3, 1fr) auto-fill;
    }
    .title, .feature-article, .cover-image, .small-article1, .small-article2 {
        grid-column: 1;
    }

    .small-article2 {
        grid-row: 4;
    }

    .cover-image {
        grid-row: 5;
    }

    img {
        top: 0;
        max-height: 100%;
        object-fit: contain;
    }
}

@media only screen and (max-width: 350px) {
    body {
    overflow-x: scroll;
    justify-content: left;
    }
}

@media only screen and (min-width: 1000px) {
    h2 {
        font-size: 3rem;}
    p {
        font-size: 1.8rem;}

    .magazine-cover {
        max-width: 900px;
    }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

Design a Magazine Layout - Design a Magazine Layout

2

Hi. Can you post all your HTML and CSS code please. Put 3 backticks before and after each block of code.

3

if you use grid-area you should not use grid-column and grid-row, as the latter two overwrite the former

4

Ok, yeah that solved it, thank you. I did not know that. I just used grid-area because it forced me to, I don’t quite see its benefit vs other ways of positioning the elements, and sources like MDN and W3Schools didn’t explain it clearly either, so I was indeed clueless about this.

5

grid-area uses the regerences to the named areas you added to the parent element with grid-template-areas

grid-row and grid-column use column and row numbers

named areas can be more intuitive in where to position elements

1 Like