为什么我的巢网格模板列不工作?HTML CSS

Question

我试图建立两行，每两列，在我的右网格框内，然而，它似乎不工作。(它只是显示为4行)你能帮我发现任何错误/给我一个如何解决这个问题的建议吗?

.about__container {
display: grid;
position: relative;
grid-template-columns: repeat(2, 1fr);
height: 100vh;
width: 100%;
background-color: green;
grid-gap: 30px;
}
.about__link {
display: grid;
grid-template-columns: repeat(2, 1fr);
background-color: red;
grid-gap: 30px;
}

<div class="about__container container-fluid grid">
<div class="about__content">
<p class="link-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim!</p>
</div>
<div class="about___link container grid">
<div class="item link__youtube">
<p class="link-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim!</p>
</div>
<div class="item link__article">
<p class="link-detail">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum, tempore!
</p>
</div>
<div class="item link__addfriend">
<p class="link-detail">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis, quia?
</p>
</div>
<div class="item link__achievement">
<p class="link-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, amet!
</p>
</div>
</div>
</div>

Answer 1

你的css使用了错误的选择器。在你的html类是.about___link，但你已经使用.about__link作为css选择器。我改变了它，它的工作，但尝试使用更干净的html和选择器，更可读:)

.about__container {
display: grid;
position: relative;
grid-template-columns: repeat(2, 1fr);
height: 100vh;
width: 100%;
background-color:green;
grid-gap: 30px;
}
.about___link{
display:grid;
grid-template-columns: repeat(2, 1fr);
background-color: red;
grid-gap: 30px;
}

<div class="about__container container-fluid grid">
<div class="about__content">
<p class="link-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim!</p>
</div>
<div class="about___link container grid">
<div class="item link__youtube">
<p class="link-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim!</p>
</div>
<div class="item link__article">
<p class="link-detail">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum,
tempore!</p>
</div>
<div class="item link__addfriend">
<p class="link-detail">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis, quia?
</p>
</div>
<div class="item link__achievement">
<p class="link-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, amet!
</p>
</div>
</div>
</div>

Answer 2

确保(.container-fluid)没有覆盖显示属性。因为，您在一个div标签中编写了两个类。

解决方案1:将(about__container)作为子元素保留在(container-fluid)div中。

解决方案2:从浏览器检查器中检查该元素，并尝试找出问题所在。

解决方案3:(不推荐)在CSS属性后使用!important !

例如:

.about__container {
display: grid !important;
position: relative;
grid-template-columns: repeat(2, 1fr) !important;
height: 100vh;
width: 100%;
background-color:green;
grid-gap: 30px;
}