my grid isn't working and i can't seem to find out why?

user_17678042 0
Viewed 74

i have been trying to fix this code for school. i've tried to tweak many things here and there but still haven't been able to figure out why my images stay to the left of the screen instead of actually making a grid, since i have used auto-fit. i have left in some css stuff from my other html pages, but the problem could be that they're interacting with eachother so i left them in there.

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>

css-grid css html
1 Answers

You have display:grid on your articles

Put display:grid on movies also make sure to change <movies> to <div class="movies"> for your css in .movies to actually work

You also need to state how many columns you want on a row by doing grid-template-columns in your .movies css file. Read more here

For example grid-template-columns:1fr 1fr 1fr will get you 3 columns

user_176780260
Related