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