第一次开始练习CSS网格，但在Chrome中根本不显示。当我启动.html时，只显示边距，但每个其他元素都显示为一个块，如：
娃娃
欢迎
球衣
运动服
炮弹
img img
.logo {
grid-area: logo
}
.nav {
grid-area: nav
}
.little {
grid-area: little
}
.container {
margin: 40px;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: auto;
grid-template-areas:
"logo . . . . ."
"nav nav . . . little";
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="edit3.css">
</head>
<body>
<body class="container">
<header>
<div class="logo">
<h1> Panenka </h1>
</div>
<nav class="nav">
<h3> Accueil </h3>
<h3> Maillots </h3>
<h3> Survêtements </h3>
<h3> Coques </h3>
</nav>
<div class="little">
<img src= "" alt = "rechercher">
<img src ="" alt = "panier">
</div>
</header>
</body>
</html>如果你有意帮助我，那就太好了！谢谢 ）
container应该是直接的父母，这是header而不是body
.logo {
grid-area: logo
}
.nav {
grid-area: nav
}
.little {
grid-area: little
}
.container {
margin: 40px;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: auto;
grid-template-areas:
"logo . . . . ."
"nav nav . . . little";
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="edit3.css">
</head>
<body>
<body>
<header class="container">
<div class="logo">
<h1> Panenka </h1>
</div>
<nav class="nav">
<h3> Accueil </h3>
<h3> Maillots </h3>
<h3> Survêtements </h3>
<h3> Coques </h3>
</nav>
<div class="little">
<img src= "" alt = "rechercher">
<img src ="" alt = "panier">
</div>
</header>
</body>
</html>