我的网格不工作，我似乎无法找出原因？答案

【问题标题】：my grid isn't working and i can't seem to find out why?我的网格不工作，我似乎无法找出原因？
【发布时间】：2022-01-18 04:32:19
【问题描述】：

我一直在尝试为学校修复此代码。我试图在这里和那里调整很多东西，但仍然无法弄清楚为什么我的图像停留在屏幕左侧而不是实际制作网格，因为我使用了自动调整。我从我的其他 html 页面中留下了一些 css 内容，但问题可能是它们正在相互交互，所以我把它们留在了那里。

body {
  font-family: "Inter", sans-serif;
  background-color: #000000;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 10px;
}


/* layout container */

.containerIndex {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.25fr 1.5fr 1.2fr 0.8fr;
  grid-template-areas: 
    "nav nav nav nav"
    "sidebar movies movies movies"
    "sidebar movies movies movies"
    "sidebar movies movies movies"
    "sidebar footer footer footer";
  grid-gap: 0.2rem;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  color: #FFFFFF;
  text-align: center;
}

.containerMain {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.25fr 1.5fr 1.5fr 0.8fr;
  grid-template-areas: 
    "nav nav nav nav"
    "main main main main" 
    "main  main main main"
    "main main main main"
    "footer footer footer footer";
  grid-gap: 0.2rem;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  color: #FFFFFF;
  text-align: center;
}

<strike>Markdown this is the movie grid.</strike>
/* film overzicht images */

.movies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 10px;
}

article {
  display: grid;
  width: 300px;
}

article img {
  grid-column: 1;
  grid-row: 1;
  width: 300px;
  height: 300px;
  display: block;
}

.overlay-text {
  align-self: end;
  grid-column: 1;
  grid-row: 1;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
  font-size: 2rem;
  line-height: 1.7;
}

.overlay-text p {
  margin: 0;
}

article img {
  width: 300px;
  height: 300px;
  display: block;
}

.overlay-text {
  align-self: end;
  grid-column: 1;
  grid-row: 1;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
  font-size: 2rem;
  line-height: 1.7;
}

.overlay-text p {
  margin: 0;
}

.airwolf_afbeelding {
  width: 300px;
  height: 300px;
  position: absolute;
  margin-left: 0px;
}

.airwolf_video {
  position: absolute;
  right: 50px;
  top: 200px;
}


/* netflix naam en logo */

.logo {
  display: block;
  position: absolute;
  margin-left: -20px;
  margin-top: -24px;
  width: 88px;
}

nav {
  font-family: fantasy;
  font-size: large;
  background: #8a0c03;
  grid-area: nav;
  border-radius: 20px;
  padding-top: 5px;
}


/* Menu */

.dropdown {
  position: absolute;
  display: block;
  margin-left: 1400px;
  margin-top: -50px;
}

.dropbtn {
  background-color: #8a0c03;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #8a0c03;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-left: -57px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  display: block;
}

.dropdown-content a:hover {
  background-color: #8a0c03;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #8a0c03;
}


/* tabel */

table,
th,
td {
  BORDER: 1;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid white;
  border-collapse: collapse;
}

th,
td {
  background-color: #8a0c03;
  color: rgba(0, 0, 0, 0.7)
}


/* algemene opmaak */

main {
  background: #000000;
  color: #8a0c03;
  grid-area: main;
  border-radius: 5px;
  padding-top: 5px;
}

.movies {
  background: #000000;
  color: #8a0c03;
  grid-area: movies;
  border-radius: 5px;
  padding-top: 5px;
}

#sidebar {
  background: #8a0c03;
  height: 100%;
  color: #000000;
  grid-area: sidebar;
  border-radius: 5px;
  padding-top: 5px;
}

footer {
  background: #8a0c03;
  grid-area: footer;
  border-radius: 5px;
  padding-top: 5px;
}

a {
  text-align: center;
  display: block;
  font-family: inherit;
  text-decoration: none;
  font-weight: bold;
  margin: 1rem;
}


/* resize voor kleinere devices */

@media only screen and (max-width: 550px) {
  .containerIndex {
    grid-template-columns: 1fr;
    grid-template-rows: 0.25fr 0.4fr 1fr 1fr;
    grid-template-areas: 
      "nav"
      "sidebar"
      "dropdown"
      "main"
      "footer";
  }
  .containerMain {
    grid-template-columns: 1fr;
    grid-template-rows: 0.25fr 0.4fr 1fr 1fr;
    grid-template-areas: 
      "nav"
      "dropdown"
      "main"
      "footer";
  }
  .dropdown {
    position: absolute;
    display: block;
    margin-left: 366.5px;
    margin-top: -50px;
  }
}

<div class="containerIndex">

  <nav>
    <a class="button" href="Index.html"><img src="/images/LogoF.jpg" class="logo" alt="LogoF">
    </a>
    <h1>F l e t n i x</h1>

    <div class="dropdown">
      <button class="dropbtn">Menu</button>
      <div class="dropdown-content">
        <a href="inloggen.html">Inloggen</a>
        <a href="registeren.html">Registreren</a>
        <a href="over_ons.html">Over ons</a>
        <a href="privacy_verklaring.html">Privacy verklaring</a>

      </div>
    </div>
  </nav>

  <movies>

    <article>
      <img src="/movies/Airwolf.jpg" alt="Airwolf">
      <div class="overlay-text">
        <p>Airwolf</p>
      </div>
    </article>

    <article>
      <img src="/movies/Annie.jpg" alt="Annie">
      <div class="overlay-text">
        <p>Annie</p>
      </div>
    </article>

    <article>
      <img src="/movies/Baywatch.jpg" alt="Baywatch">
      <div class="overlay-text">
        <p>Baywatch</p>
      </div>
    </article>

    <article>
      <img src="/movies/Clueless.jpg" alt="Clueless">
      <div class="overlay-text">
        <p>Clueless</p>
      </div>
    </article>

    <article>
      <img src="/movies/Deadpool.jpg" alt="Deadpool">
      <div class="overlay-text">
        <p>Deadpool</p>
      </div>
    </article>

    <article>
      <img src="/movies/Election.jpg" alt="Election">
      <div class="overlay-text">
        <p>Election</p>
      </div>
    </article>

    <article>
      <img src="/movies/Fences.jpg" alt="Fences">
      <div class="overlay-text">
        <p>Fences</p>
      </div>
    </article>

    <article>
      <img src="/movies/Friends.jpg" alt="Friends">
      <div class="overlay-text">
        <p>Friends</p>
      </div>
    </article>

    <article>
      <img src="/movies/Fringe.jpg" alt="Fringe">
      <div class="overlay-text">
        <p>Fringe</p>
      </div>
    </article>

    <article>
      <img src="/movies/Frozen.jpg" alt="Frozen">
      <div class="overlay-text">
        <p>Frozen</p>
      </div>
    </article>

    <article>
      <img src="/movies/Gravity.jpg" alt="Gravity">
      <div class="overlay-text">
        <p>Gravity</p>
      </div>
    </article>

    <article>
      <img src="/movies/Her.jpg" alt="Her">
      <div class="overlay-text">
        <p>Her</p>
      </div>
    </article>

    <article>
      <img src="/movies/Madagascar.jpg" alt="Madagascar">
      <div class="overlay-text">
        <p>Madagascar</p>
      </div>
    </article>

    <article>
      <img src="/movies/Maleficent.jpg" alt="Maleficent">
      <div class="overlay-text">
        <p>Maleficent</p>
      </div>
    </article>

    <article>
      <img src="/movies/Moneyball.jpg" alt="Moneyball">
      <div class="overlay-text">
        <p>Moneyball</p>
      </div>
    </article>

    <article>
      <img src="/movies/Ratatouille.jpg" alt="Ratatouille">
      <div class="overlay-text">
        <p>Ratatouille</p>
      </div>
    </article>

    <article>
      <img src="/movies/Rio.jpg" alt="Rio">
      <div class="overlay-text">
        <p>Rio</p>
      </div>
    </article>

    <article>
      <img src="/movies/Roseanne.jpg" alt="Roseanne">
      <div class="overlay-text">
        <p>Roseanne</p>
      </div>
    </article>

    <article>
      <img src="/movies/Salt.jpg" alt="Salt">
      <div class="overlay-text">
        <p>Salt</p>
      </div>
    </article>

    <article>
      <img src="/movies/Serpico.jpg" alt="Serpico">
      <div class="overlay-text">
        <p>Serpico</p>
      </div>
    </article>

    <article>
      <img src="/movies/Shrek.jpg" alt="Shrek">
      <div class="overlay-text">
        <p>Shrek</p>
      </div>
    </article>

    <article>
      <img src="/movies/Titanic.jpg" alt="Titanic">
      <div class="overlay-text">
        <p>Titanic</p>
      </div>
    </article>

    <article>
      <img src="/movies/Twilight.jpg" alt="Twilight">
      <div class="overlay-text">
        <p>Twilight</p>
      </div>
    </article>

    <article>
      <img src="/movies/Vaiana.jpg" alt="Vaiana">
      <div class="overlay-text">
        <p>Vaiana</p>
      </div>
    </article>

    <article>
      <img src="/movies/Wanted.jpg" alt="Wanted">
      <div class="overlay-text">
        <p>Wanted</p>
      </div>
    </article>

    <article>
      <img src="/movies/Wild.jpg" alt="Wild">
      <div class="overlay-text">
        <p>Wild</p>
      </div>
    </article>
  </movies>

  <div id="sidebar">
    <label for="zoeken">zoeken:
    <br>
    <input type="text" id="zoeken" name="zoeken" ><br>
  </label>
    <br>
    <br> Genre's:
    <br>
    <br> Actie
    <br>
    <br> Comedy
    <br>
    <br> Animatie
    <br>
    <br> drama
    <br>
    <br> avontuur
    <br>
    <br> romantisch
    <br>
    <br> thriller



  </div>
  <footer>
    © FletNix - 2021

  </footer>
</div>

【问题讨论】：

<movies> 不是 HTML 元素，因此呈现您的 HTML 无效。您不能只想出自己的标签名称；如果需要，请确保遵循有效自定义元素名称的规则。话虽如此，您在任何元素上定义的任何grid 都只会影响其直接子元素。你的body只有这样一个：<div class="containerIndex">

标签： html css css-grid

【解决方案1】：

您的文章中有display:grid

将display:grid 放在电影上，还要确保将<movies> 更改为<div class="movies"> 以使您的.movies 中的css 真正起作用

您还需要通过在 .movies css 文件中执行 grid-template-columns 来说明您希望在一行中有多少列。 Read more here

例如grid-template-columns:1fr 1fr 1fr 将为您提供 3 列

【讨论】：