记录一下我使用display和grid时犯下的错误【2021.12.4】

最新推荐文章于 2023-06-17 19:21:06 发布

轻盈的风

最新推荐文章于 2023-06-17 19:21:06 发布

阅读量788

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/masierty/article/details/121729297

版权

CSS grid grid-row 内容切换 display:none JavaScript事件

关键词由CSDN通过智能技术生成

我想要用 grid-row: 2/3;来固定住第二排的内容，让第一排的网格区域得到保留，点击第二排区域里面的按钮控制第一排区域的内容的出现和消失（display）。

我这个逻辑是没问题的，但是如果第一排内容全都被display：none，rid-row: 2/3是不起作用的。

第一排只要有一个网格还有内容，都是可以用这个方法来操作的。

我简易还原了一下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .contener {
            width: 80%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, auto);
            gap: 12px;
            margin: 50px auto;
            justify-items: center;
        }

        .item {
            background-color: rgb(167, 221, 243);
            width: 80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
        }

        .contener div:nth-child(4),
        .contener div:nth-child(5),
        .contener div:nth-child(6) {
            grid-row: 2/3;
        }
    </style>
</head>

<body>
    <div class="contener">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
<script>
    const itemEl = document.querySelectorAll(".item");
    itemEl[3].onclick = function () {
        for (let i = 0; i < 3; i++) {
            itemEl[i].style.display = "none";
        }

    }
    itemEl[5].onclick = function () {
        itemEl[0].style.display = "block";
    }
</script>

</html>