Tell us what’s happening:
Hi there!
Could someone help me please. In my css, the rule sets to grid-template-areas don’t apply. If I try to figure out what happened in devtools, it says that: " Invalid property value "
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Magazine Layout</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<main class="magazine-cover">
<header class="title">
<h1>5 Things We Know About Chronic Pain</h1>
<p class="primary-text">
After developing chronic pain, I started looking into what scientists do — and still don’t — understand about the disease. Here is what I learned.
</p>
</header>
<section class="feature-article">
<h2 class="article-heading">
Chronic pain is not just a symptom, but a disease.
</h2>
<p class="primary-text">
We used to think that we may die in pain but don’t die of it. Now chronic pain is often considered an illness in its own right, one that occurs when our nerves become hyperactivated or “sensitized.” This can happen even if we have healed from the injury to which we can trace our pain — or for no reason at all. Scientists used to be mystified by persistent pain but now recognize that chronic pain is a disorder of the central nervous system. In some cases, pain signals just keep firing, driven by what researchers now think is a complex set of genetic, endocrinological and immunologic processes.
</p>
</section>
<section class="small-article1">
<h2 class="article-heading">
A quarter of the world’s population suffers from chronic pain.
</h2>
<p class="primary-text">
In the United States some 100 million people have chronic pain; globally, it’s as many as two billion. Despite these numbers, and the financial, physical and emotional toll that chronic pain takes, it has received only a fraction of the funding that diseases like cancer and diabetes have. And there is no national center for the study of chronic pain. But researchers are finally beginning to understand the underlying mechanisms of pain — and how to treat it.
</p>
</section>
<section class="small-article2">
<h2 class="article-heading">
New research could revolutionize treatment.
</h2>
<p class="primary-text">
Researchers and pharmaceutical companies studying pain primarily used mice or other animals as human proxies and would then invest years or decades trying to develop a new drug only to have it fail in humans. New technologies have enabled researchers to recover and study tissue samples taken from patients with chronic pain and to figure out what changes happen at a cellular level when pain becomes chronic. The goal is to design drugs that can target those changes specifically.
</p>
</section>
<section class="cover-image">
<img src="https://static01.nyt.com/images/2025/01/19/magazine/19mag-pain-takeaways/19mag-pain-takeaways-jumbo-v2.jpg" alt="Human's hands" class="cover">
</section>
</main>
</body>
</html>
/* file: styles.css */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%
}
body{
font-family: Times new roman, serif;
background-color: aliceblue;
color: #2a2a40
}
.magazine-cover {
display: grid;
background-color: #f5f6f7;
width: min(50% , 80rem);
margin: 5rem auto;
grid-template-areas:"title title" "feature-article cover-image" "small-article1 small-article2 cover-image";
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 1fr 1fr;
gap: 10px;
}
.title{
grid-area: title;
background-color: #2a2a40;
color: #f5f6f7;
text-align: center;
padding: 0.5rem;
margin-bottom: 0.5rem;
}
h1{
font-family: Cursive, sans-serif;
font-size: 6.5rem;
letter-spacing: -2px;
margin-bottom: 0.5rem;
}
.primary-text{
font-size: 1.5rem;
}
.feature-article {
display: grid;
background-color: #dfdfe2;
grid-area: feature-article;
margin: 2rem
}
.small-article1 {
display: grid;
grid-area: small-article1;
}
.small-article2 {
display: grid;
grid-area: small-article2;
}
.cover-image {
display: grid;
grid-area: cover-image;
}
.article-heading{
font-family: Monospace, Arial;
font-size: 5rem;
font-style: italic;
}
.cover{
object-fit: cover;
width: min(50% , 100%)
}
### Your browser information:
User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36 Edg/132.0.0.0</code>
### Challenge Information:
Design a Magazine Layout - Design a Magazine Layout
https://www.freecodecamp.org/learn/full-stack-developer/lab-magazine-layout/design-a-magazine-layout
