如何停止网格显示上的弹性显示覆盖？ [复制]答案

【问题标题】：How to stop flex display overriding on grid display? [duplicate]如何停止网格显示上的弹性显示覆盖？ [复制]
【发布时间】：2021-01-12 00:57:57
【问题描述】：

我的目标是创建一个最初具有网格显示的布局，并且对于其中的每个直接子级，具有弹性显示以完美地将其中的项目居中，到目前为止，它成功了，直到我给了一个 .wrapper（第一个父级) 的孩子(.nested) 一些孩子和我给了.nested display: 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>

【问题讨论】：

不知道为什么我已经 (1) 给了你答案和 (2) 解释了，你为什么还要重复同样的问题

标签： html css flexbox css-grid

【解决方案1】：

你的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 中检查

【讨论】：

很好，但我还是不明白选择 .nested 有什么问题？
阅读本文w3schools.com/css/css_specificity.asp
或者这个developer.mozilla.org/en-US/docs/Web/CSS/Specificity

【解决方案2】：

你用 display:flex 覆盖 display:grid 因为“.wrapper > div”的优先级高于“.nested”。

您可能会在 box6 内为嵌套类添加一个新 div...

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

【讨论】：