Question

我使用下面的“display：grid”来对齐div，我没有设置任何div的边框。但它仍然在移动视图中显示，或者当我们在小屏幕中看到时。问题是什么，我们可以隐藏这些吗？

我在Chrome浏览器中查看它 - 有没有解决方法？

我添加了代码段，请查看下面的

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    background-color: #969596;
    margin: 0 auto;
    width: 50%;
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    border: none;
}

<html>
    <body>
        <div class="grid-container grid-canvas">
            <div class="row1col1 grid-item">&nbsp;</div>
            <div class="row1col2 grid-item">&nbsp;</div>
            <div class="row1col3 grid-item">&nbsp;</div>
            <div class="row1col4 grid-item">&nbsp;</div>
            <div class="row1col5 grid-item">&nbsp;</div>
            <div class="row1col6 grid-item">&nbsp;</div>
            <div class="row1col7 grid-item">&nbsp;</div>
            <div class="row1col8 grid-item">&nbsp;</div>

            <div class="row2col1 grid-item">&nbsp;</div>
            <div class="row2col2 grid-item">&nbsp;</div>
            <div class="row2col3 grid-item">&nbsp;</div>
            <div class="row2col4 grid-item">&nbsp;</div>
            <div class="row2col5 grid-item">&nbsp;</div>
            <div class="row2col6 grid-item">&nbsp;</div>
            <div class="row2col7 grid-item">&nbsp;</div>
            <div class="row2col8 grid-item">&nbsp;</div>

            <div class="row3col1 grid-item">&nbsp;</div>
            <div class="row3col2 grid-item">&nbsp;</div>
            <div class="row3col3 grid-item">&nbsp;</div>
            <div class="row3col4 grid-item">&nbsp;</div>
            <div class="row3col5 grid-item">&nbsp;</div>
            <div class="row3col6 grid-item">&nbsp;</div>
            <div class="row3col7 grid-item">&nbsp;</div>
            <div class="row3col8 grid-item">&nbsp;</div>
        </div>

    </body>
</html>

Css显示网格显示边框问题

0 个答案: