在使用 grid-template-rows:/grid-template-columns 声明模板后，我尝试使用 grid-column/grid-row 赋值对齐嵌套网格中的元素。但是当我去把元素放在我想要的地方时，它们最终会出现在意想不到的地方。 $50 和 Give Now 元素应该出现在第 3 行，其中一个在第 1 列，另一个在第 2 列。相反，它们显示在第 2 列的第 1 行和第 2 行。我不明白为什么它们会这样显示。在此问题上的任何帮助将不胜感激。
谢谢
.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>最佳答案
您混淆了网格计数。你不想数列，你想数行。拿一张废纸并标记 3 条垂直线(用于两列)，然后标记水平线(用于行)。当您标记 p1、p2 和 p5 以指示您的列跨度时，您(非常合乎逻辑地)表示第一列和第二列为 1/2 .正确的方法是计算行数。看看你的草稿纸，这些类(class)应该从第一行开始到第三行结束。所以，快速更改您的 CSS，您应该是“黄金”。 (注意:下面的链接了解更多详情)
.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;
}
关于CSS 网格元素未按预期进行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54384403/