Question

第一次开始练习CSS网格，但是在Chrome中根本不显示。当我启动.html时，仅显示边距，但其他所有元素均显示为块：

panenka

准确

邮箱

刺激

coques

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>

如果您有帮助我的想法，那就太好了！谢谢）

Answer 1

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";
  }

CSS网格不显示

1 个答案: