CSS Grid не отображается - PullRequest
Новая
       6

CSS Grid не отображается

0 голосов
/ 07 марта 2019

Начинаю практиковать CSS-сетку в первый раз, но она не отображается вообще в Chrome.Когда я запускаю .html, отображаются только поля, но все остальные элементы отображаются в виде блока, например:

panenka

accueil

maillots

выживания

коки 

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>

Если бы у вас была идея помочь мне, было бы здорово!Спасибо тебе)

1 Ответ

0 голосов
/ 07 марта 2019

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>
...