【发布时间】：2019-07-21 02:12:04
【问题描述】：
I have made this CSS grid。我还在练习使用 CSS 网格，所以我试图模仿 this site。我想将文本放置在与我链接到的模板相同的位置。
但是正确的方法是如何做到这一点的呢？目前链接在左上角。
我应该在第一个 div 标签中创建另一个 div，或者最好的方法是什么？
最好的问候。
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
}
.wrapper > div {
background-color: #eee;
padding: 1em;
box-sizing: border-box;
}
.wrapper > div:nth-child(odd) {
background-color: #ddd;
}
.item1 {
grid-row: 1 / 3;
grid-column: 1/7;
height: 700px;
}
.item2 {
grid-row: 1 / 1;
grid-column: 7/13;
height: 340px;
}
.item3 {
grid-row: 2 / 3;
grid-column: 7/10;
height: 350px;
}
.item4 {
grid-row:2/3;
grid-column: 10/13;
height: 350px;
}
a {
font-size: 30px;
}
@media only screen and (max-width: 600px) {
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
}
.item1 {
grid-row: 1 / 3;
grid-column: 1/13;
height: 350px;
}
.item2 {
grid-row: 3 / 3;
grid-column: 1/13;
height: 200px;
}
.item3 {
grid-row: 4 / 5;
grid-column: 1 / 7;
height: 200px;
}
.item4 {
grid-row: 4 / 5;
grid-column: 7 / 13;
height: 200px;
}
}
/*
.nested {
display:grid;
grid-template-columns:repeat(3,1fr);
grid-gap:1em;
}
.nested > div {
border:1px solid red;
grid-auto-rows: 70px;
padding:1em;
}
*/<div class="wrapper">
<div class="item1">
<a href="#">Watch a tiny cat taking a bath</a>
</div>
<div class="item2">
<a href="#">Spain: Take a virtual tour</a>
</div>
<div class="item3">
<a href="#">5 Tips to create your garden</a>
</div>
<div class="item4">
<a href="#">10 Movies you need to see</a>
</div>
</div>【问题讨论】：
-
致那些将其标记为重复问题并提出“这个问题在这里已经有了答案：”的人。发布的所有链接都与文本的 flexbox 和 CSS 网格位置无关。
-
仅仅是因为它不是关于 flexbox 或 CSS 网格，而是关于对齐 div 内的文本。如果您阅读副本，您会注意到与您接受的答案相同的 flexbox 解决方案：stackoverflow.com/a/40777362/8620333 / stackoverflow.com/a/35046535/8620333 确认重复
-
文本不在网格内..您的包装器是网格元素，项目是网格项目，这是您的网格范围..项目内的内容不属于网格。然后你能解释一下 flexbox 是如何为你工作的吗？仅仅因为您将网格项目设置为一个 flex 容器以对齐内部文本，或者您可以使用副本中描述的任何技术以不同方式执行此操作。使用 display:grid 不会使您的所有 html 成为网格，只会使您应用它的元素。所以你的问题是“在 div 中对齐文本”