Need help with CSS grid

Hello,
I’m trying CSS Grid
And I encountered a question
Here is a part of my code in which I got issue

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Responsive Grid CSS WEB</title>
    <link rel="stylesheet" type="text/css" href="CSS/style.css">
    
	<style>
	
html {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background: #ccc;
    line-height: 1.4;
}
    
.top-container {
    display: grid;
    grid-gap: 5px;
    background-color: blueviolet;   
    grid-template-areas:
        "s s t-a"
        "s s t-b";
}
.showcase{    
    grid-area: s;
	background-color: aqua;
}
.top-box-a{
    grid-area: t-a;
    background-color: burlywood;
}
.top-box-b{
    grid-area: t-b;
    background-color:aquamarine;
}
    </style>
</head>
 
 <section class="top-contaianer">
            <header class="showcase">
                <h1>My Web Page</h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
                <a href="#" class="btn">Read More</a>
            </header>
            <div class="top-box top-box-a">
                <h4>Membership</h4>
                <p class="price">$199/mo</p>
                <a href="#" class="btn">Buy Now</a>
            </div>
            <div class="top-box top-box-b">
                <h4>Pro Membership</h4>
                <p class="price">$299/mo</p>
                <a href="#" class="btn">Buy Now</a>
            </div>
        </section>

Here I’m trying to set the .top-container in the grid-template-areas that it will look like this

grid-template-areas:
        "s s t-a"
        "s s t-b";

but I have something like this

"s s s"
"t-a t-a t-a"
"t-b t-b t-b"

and I can’t catch what is wrong with it?
The sandbox on codepen Codepen

Typo.

<section class="...">
1 Like

Thank you it is so stupid

1 Like