I am trying to align items in a nested grid using grid-column/grid-row assignment after declaring the template using grid-template-rows:/grid-template-columns. But when I go to place the items where I would like them they end up in unexpected areas. The $50 and Give Now items should be appearing on row 3 with one of them on column 1 and the other on column 2. Instead they are displaying in column 2 on rows 1 and 2. I cannot figure out why they are displaying this way. Any help in this issue would be appreciated.
Thanks
.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>You have confused your grid counts. You don't want to count columns, you want to count lines. Grab a piece of scrap paper and mark 3 vertical lines (for your two columns), then horizontal lines (for your rows). When you marked p1, p2, and p5 to indicate your column span, you (quite logically) said 1/2 for columns one and two. The correct way to do it is to count the lines. Look at your scrap paper, these classes should start on the first line and end on the third. So, a quick change to your CSS and you should be "golden". (note: the link below for further details)
.main p1 {
grid-column: 1 / 3;
grid-row: 1;
}
.main p2 {
grid-column:1 / 3;
grid-row: 2;
}
.main p5 {
grid-column: 1 / 3;
grid-row: 4;
color: #20A1D4;
}