I am currently facing an issue with aligning items in a nested grid using grid-column/grid-row assignment. After setting the template with grid-template-rows:/grid-template-columns, I expected the $50 and Give Now items to appear on row 3, with one in column 1 and the other in column 2. However, they are displaying in column 2 on rows 1 and 2 instead. I am struggling to understand why this unexpected layout is occurring and would appreciate any assistance with resolving this issue.
Thank you.
.mockup {
display: grid;
max-width: 303px;
position: relative;
margin: auto;
grid-gap: 10px;
grid-template-areas: "infobar infobar" "progbar progbar" "main main" "button2 button3";
grid-template-columns: 50% 50%;
grid-template-rows: 65px 20px 250px 50px 50px;
}
.infobar {
grid-area: infobar;
padding: 5px 18px;
border-radius: 4px;
color: white;
background-color: #424242;
font-family: "rooney-web", "AmericanTypewriter";
white-space: nowrap;
text-align: center;
}
.infobar:before {
content: ' ';
display: block;
position: relative;
bottom: -48px;
width: 14px;
height: 18px;
right: -247px;
background-color: #424242;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
.progbar {
grid-area: progbar;
border: 1px solid #777;
margin: none;
background: linear-gradient(to right, #EF5F3C 75%, #eaeaea 25%);
}
.main {
grid-area: main;
border: 1px solid #777;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: repeat(4, 25%)
}
.main .input p4{
border: 1px solid #777;
border-radius: 4px;
grid-column: 1;
grid-row: 3;
font-size: 20px;
z-index: 1;
}
.main .button1 p3 {
grid-column: 2;
grid-row: 3;
white-space: nowrap;
background-color: Green;
border: 1px solid #777;
border-radius: 4px;
text-align: center;
color: white;
z-index: 1;
}
.main p1 {
grid-column: 1 / 2;
grid-row: 1;
}
.main p2 {
grid-column:1 / 2;
grid-row: 2;
}
.main p5 {
grid-column: 1 / 2;
grid-row: 4;
color: #20A1D4;
}
.button2 {
grid-area: button2;
border: 1px solid #777;
border-radius: 4px;
text-align: center;
background-color: #eaeaea;
}
.button3 {
grid-area: button3;
white-space: nowrap;
border: 1px solid #777;
border-radius: 4px;
text-align: center;
background-color: #eaeaea;
}<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<div class="mockup">
<section class="infobar">$167 still needed for this project</section>
<section class="progbar"></section>
<section class="main">
<p1>
<span style="color: #EF5F3C">Only 3 days left</span> to fund this project.
</p1>
<p2>
Join the <strong>42</strong> others who have already supported this project. Every dollar helps.
</p2>
<section class="input">
<p4>
$ <strong>50</strong>
</p4>
</section>
<section class="button1">
<p3>
Give Now
</p3>
</section>
<p5>
Why give $50?
</p5>
</section>
<section class="button2">
<p>
Save for later
</p>
</section>
<section class="button3">
<p>
Tell your friends
</p>
</section>
</div>
</body>
</html>