Question

在我的代码中，我试图将包装元素显示为网格，但是当我检查页面时，它告诉我我的 display / grid-template-columns / grid-template-area 是无效输入。我很困惑为什么会发生这种情况，有人可以看看这个并给我他们的意见吗？

这是我的 HTML

var update = serverStream.ReadObject<NetworkTransmittedUpdate>();

这是我的包装元素的 css

<!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">
<!--Linking our new CSS style sheet to flexform.php -->    
    <link href="./css/flex_nav.css" rel="stylesheet">
    <title>Flex Nav</title>
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
    <link href="https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap" rel="stylesheet"> 
</head>
<body>

        <header class="header">    
            <h1>INF7440</h1>
        </header>

    <nav>

<!--Use of HTML tags give more semantic meaning to code -->
        <ul class="menu">
            <li class="logo"><a href="#">BGAles</a></li>
            <li class="item"><a href="#">Home</a></li>
            <li class="item"><a href="#">Products</a></li>
            <li class="item"><a href="#">About Us</a></li>
            <li class="item button"><a href="#">Login</a></li>
            <li class="item button secondary"><a href="#">Signup</a></li>
            <li class="toggle"><span class="bars"></span></li>
        </ul>


    </nav>



    <div id="wrapper">

        <aside class="aside-1">
            <h1>Aside 1</h1>
            <p>Pellentesque id ante quis lacus condimentum suscipit eu quis justo. Nam cursus sollicitudin tortor, ut porta orci placerat a.</p>
        </aside>

        <article class="article">
            <h1>Article</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac sem dignissim, porttitor sem sed, eleifend dolor. Cras enim ex, rhoncus in euismod eget, placerat vel enim.</p>
        </article>

        <aside class="aside-2">
            <h1>Aside 2</h1>
            <p>Duis id lobortis sem. Pellentesque efficitur lacus nec condimentum auctor. Vivamus est purus, feugiat sit amet pellentesque et, semper quis lacus.</p>
        </aside>

        <aside class="aside-3">
            <h1>Aside 3</h1>
            <p>Fusce mattis leo augue, a cursus lorem elementum at. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
        </aside>

        <article class="article">
            <h1>Article 2</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac sem dignissim, porttitor sem sed, eleifend dolor. Cras enim ex, rhoncus in euismod eget, placerat vel enim.</p>
        </article>

        <aside class="aside-4">
            <h1>Aside 3</h1>
            <p>Etiam nec nisl quam. Nunc malesuada lectus urna, ut sagittis felis dapibus et. Aliquam augue purus, ultrices vel imperdiet et, interdum eu dui.</p>
        </aside>

        <article class="pct">
            <h1>family</h1>
            <section class="section-1">
                <div class="pct-image"><img src="./images/grandpa.jpg"></div>
            </section>
        </article>

        <footer class="footer">
            <ul>
                <li>This is</li>
                <li>A footer</li>
            </ul>
        </footer>

    </div>



    <!--Loading jquery library dynamically -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!--Adding additional jquery script to page -->
    <script>
        $(function() {
            $(".toggle").on("click", function() {
                if($(".item").hasClass("active")) {
                    $(".item").removeClass("active");
                } else {
                    $(".item").addClass("active");
                }
            })
        });
    </script>



</body>
</html>

Answer 1

您还必须将网格区域分配给孩子，例如：

#wrapper .footer {
    grid-area: footer;
}

否则他们只会一一填满网格。

网格显示css有问题

1 个答案: