Html 对齐CSS元素网格中的文本

。我还在练习使用CSS网格，所以我试着模仿。我想将文本放置在与我链接到的模板相同的位置

但正确的方法是什么呢？此时链接位于左上角

我应该在第一个div标签中再做一个div，还是最好的方法是什么

致以最良好的祝愿

.wrapper{
显示：网格；
网格模板列：重复（12,1fr）；
栅隙：10px；
} 
.wrapper>div{
背景色：#eee；
填充：1em；
框大小：边框框；
}
.wrapper>div:n个子项（奇数）{
背景色：#ddd；
}
.项目1{
网格行：1/3；
网格柱：1/7；
高度：700px；
}
.项目2{
网格行：1/1；
网格柱：7/13；
高度：340px；
}
.项目3{
网格行：2/3；
网格柱：7/10；
高度：350px；
} 
.项目4{
网格行：2/3；
网格柱：10/13；
高度：350px；
}
a{
字体大小：30px；
}
@仅介质屏幕和（最大宽度：600px）{
.包装纸{
显示：网格；
网格模板列：重复（12,1fr）；
栅隙：10px；
} 
.项目1{
网格行：1/3；
网格柱：1/13；
高度：350px；
}
.项目2{
网格行：3/3；
网格柱：1/13；
高度：200px；
}
.项目3{
网格行：4/5；
网格柱：1/7；
高度：200px；
} 
.项目4{
网格行：4/5；
网格柱：7/13；
高度：200px；
}
}
/*
.嵌套{
显示：网格；
网格模板列：重复（3,1fr）；
网格间距：1米；
}
.nested>div{
边框：1px纯红；
网格自动行：70px；
填充：1em；
}
*/

将此项添加到项目中

display: flex;
justify-content: flex-end;
flex-direction: column;

.wrapper{
显示：网格；
网格模板列：重复（12,1fr）；
栅隙：10px；
} 
.wrapper>div{
背景色：#eee；
填充：1em；
框大小：边框框；
}
.wrapper>div:n个子项（奇数）{
背景色：#ddd；
}
.项目1{
网格行：1/3；
网格柱：1/7；
高度：700px；
显示器：flex；
证明内容：柔性端；
弯曲方向：立柱；
}
.项目2{
网格行：1/1；
网格柱：7/13；
高度：340px；
}
.项目3{
网格行：2/3；
网格柱：7/10；
高度：350px；
} 
.项目4{
网格行：2/3；
网格柱：10/13；
高度：350px；
}
a{
字体大小：30px；
}
@仅介质屏幕和（最大宽度：600px）{
.包装纸{
显示：网格；
网格模板列：重复（12,1fr）；
栅隙：10px；
} 
.项目1{
网格行：1/3；
网格柱：1/13；
高度：350px；
}
.项目2{
网格行：3/3；
网格柱：1/13；
高度：200px；
}
.项目3{
网格行：4/5；
网格柱：1/7；
高度：200px；
} 
.项目4{
网格行：4/5；
网格柱：7/13；
高度：200px；
}
}
/*
.嵌套{
显示：网格；
网格模板列：重复（3,1fr）；
网格间距：1米；
}
.nested>div{
边框：1px纯红；
网格自动行：70px；
填充：1em；
}
*/

非常感谢您的回答。我可以看出这是可行的。但是，是什么控制了文本的位置呢？如果我想让文本比现在更上一层楼，是我必须使用的填充物，还是有一种聪明的方法可以做到这一点？你可以添加

边距

：）它由

flex

控制-阅读它。您告诉项目内的内容为列（垂直），然后将其对齐到末端

flex end

。希望这是有意义的，你确定把css网格和flexbox混为一谈是正确的吗？我不太熟悉css网格，我相信你可以找到一种方法来解决它，但是flexbox是有效的，我不认为有什么理由不使用它来回答那些将此标记为一个复杂问题并提出“这个问题在这里已经有答案”的人。发布的所有链接都与flexbox和CSS网格文本的放置无关。因为这不是关于flexbox或CSS网格，而是关于在div中对齐文本。如果你阅读了副本，你会注意到flexbox解决方案与你接受的答案相同：/这证实了副本你很奇怪。上下文是CSS网格内文本的行为。文本不在网格内。。包装器是网格元素，项是网格项，这是网格的范围。。项目内部的内容不属于网格。然后你能解释一下flexbox是如何为你工作的吗？这仅仅是因为您将网格项设置为一个flex容器，以对齐其中的文本，或者您可以使用副本中描述的任何技术进行不同的操作。使用display:grid不会使所有html都成为网格，只会使应用它的元素成为网格。所以你的问题是“对齐div中的文本”