如何停止网格显示上的柔性显示覆盖

我的目标是创建一个最初具有网格显示的布局，对于其中的每个直接子对象，都具有灵活的显示，以完美地将其内部的项目居中，到目前为止，它一直有效，直到我给一个.wrapper(第一个父对象(的子对象(.nested(一些子对象，给.nesteddisplay: grid;；但由于某些原因，.nested的display: grid被省略了，并且不具有grid-auto-rows: 100px的属性，这是我的问题。

我到处寻找解决方案，但找不到，有人能帮我解决这个问题吗？

*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
main{
max-width: 100%;
}
.wrapper{
padding: 0 50px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1em;
grid-auto-rows: minmax(100px, auto);
}
.wrapper > div{
background-color: silver;
padding: 1em;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper > div:nth-child(odd){
background-color: #dbdbdb;
}
.nested{
display: grid;
grid-template-columns: 1fr;
grid-gap: 1em;
grid-auto-rows: 100px !important;
}
.wrapper .nested div{
border: 1px solid #000;
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<main>
<div class="wrapper">
<div class="box box1">
Lorem ipsum dolor sit.
</div>
<div class="box box2">
Lorem ipsum dolor sit.
</div>
<div class="box box3">
Lorem ipsum dolor sit.
</div>
<div class="box box4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, asperiores at atque beatae cum cupiditate doloremque, error est, eveniet laboriosam nihil officiis pariatur porro rem tempore. A accusamus animi delectus, dolore eaque eveniet impedit maiores molestiae perspiciatis quidem sequi, veniam?
</div>
<div class="box box5">
Lorem ipsum dolor sit.
</div>
<div class="box box6 nested">
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
</div>
<div class="box box7">
Lorem ipsum dolor sit.
</div>
<div class="box box8">
Lorem ipsum dolor sit.
</div>
<div class="box box9">
Lorem ipsum dolor sit.
</div>
<div class="box box10">
Lorem ipsum dolor sit.
</div>
<div class="box box11">
Lorem ipsum dolor sit.
</div>
</div>
</main>
</body>
</html>

css文件中的选择器错误，您必须将其替换为

你必须更换这个选择

.nested{
display: grid;
grid-template-columns: 1fr;
grid-gap: 1em;
grid-auto-rows: 100px !important;
}

用这个

.wrapper > div.nested{
display: grid;
grid-template-columns: 1fr;
grid-gap: 1em;
grid-auto-rows: 100px !important;
}

为了更好地调试，请定期在DevTool 中进行检查

您正在用display:flex覆盖display:grid，因为"。包装器>div"；具有比"更高的优先级；。嵌套"；。

您可以在box6中为嵌套类添加一个新的div。。。

<div class="box box6">
<div class="nested">
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
</div>
</div>

相关内容

最新更新

热门标签：