在我的代码中,我试图将包装元素显示为网格,但是当我检查页面时,它告诉我我的 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>
答案 0 :(得分:1)
您还必须将网格区域分配给孩子,例如:
#wrapper .footer {
grid-area: footer;
}
否则他们只会一一填满网格。