Как исправить проблему с сеткой в ​​css, потому что мои фотографии не отображаются

Question

Итак, мне пришлось создать веб-страницу с областями CSS Grid.После того, как я написал свой CSS и пошел к инспектору, я увидел свою сетку, чтобы она работала.Но мои фотографии не показывались .. Почему?

Я заметил, что часть сетки была заполнена, когда я поставил имя области сетки в скобках, но в уроках это не такработает.

Если я что-то не так делаю, дайте мне знать!

Мой код

    <header>
  <nav>
      <img src="Logo.png" width="30%" height="30%">
      <ul>
          <a href="#"><li>Home</li></a>
          <a href="#"><li>Gallery</li></a>
          <a href="#"><li>About</li></a>
        </ul>
    </nav>
 </header>

      <main>
        <div class="grid">
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
        </div>
      </main>


 </body>




        html {
          root: font-size: 62.5%;
        }

        header {
          height: 100%;
          width: 100vw;
          position: relative;
        }

        img {

          margin-left: auto;
          margin-right: auto;
          display: inline-block;
          text-align: center;
        }

        nav {
          display: block;
          border-bottom: solid 4px black;
          text-align: center;
          margin-left: auto;
          margin-right: auto;

        }

        nav li {
        display: inline-flex;
        justify-content: center;
        height: 100%;
        margin-right:auto;
        margin-left: auto;
        padding: 8px 13px 8px 3px;
        }



        nav a {
          color: black;
          font-weight: bold;
        }

        main {
          height: 700vh;
          width: 100vw;
        }

        .grid {
          background-color: black;
          height:700vh;
          width: 100vw;
          display: grid;
          grid-template-rows: repeat(20, 1fr)  ;
          grid-row-gap: 20px;
          }

        .grid div {
          grid-row: 1;
          background-image: url(https://e00-marca.uecdn.es/assets/multimedia/imagenes/2018/08/19/15347041965884.jpg);
          background-size: cover;
          background-repeat: no-repeat;
        }

        .grid div:nth-child(2) {
          grid-row: 2;
          background-image: url(https://static1.squarespace.com/static/56cb3b9d7c65e45c27f93388/t/5aa64e3824a694a840e74d32/1522767740629/Ini-main.jpg);
          background-size: cover;
          background-repeat: no-repeat;
        }

        .grid div:nth-child(3) {
          grid-row: 3;
          background-image: url(http://xevathethao.vn/wp-content/uploads/2017/08/18-ban-thang-cua-doi-truong-huyen-thoai-puyol-cho-barca-205718.jpg);
          background-size: cover;
          background-repeat: no-repeat;
        }

        .grid div:nth-child(4) {
          grid-row: 4;
          background-image: url(https://nieuws.medialaancdn.be/sites/nieuws.vtm.be/files/styles/larger/public/article/image/2013/07/villa.jpg?itok=K5ii24ZZ);
          background-size: cover;
          background-repeat: no-repeat;
        }





        .grid div:nth-child(5) {
          grid-row: 5;
          background-image: url(https://www.vi.nl/.imaging/mte/vinl-website-theme/760x506/dam/articles/artikelen/2013/03/13/xavi_1024.jpg/jcr:content/xavi_1024.jpg);
          background-size: cover;
          background-repeat: no-repeat;
        }

        .grid div:nth-child(6) {
          grid-row: 6;
          background-image: url(https://e0.365dm.com/13/09/800x600/robin-van-persie-manchester-crystal-palace-premier-league_3004821.jpg?20130917113837);
          background-size: cover;
          background-repeat: no-repeat;
        }

        .grid div:nth-child(7) {
          grid-row: 7;
          background-image: url(https://cdn.newsapi.com.au/image/v1/40d266dcfb50449238c0102d12d49b85?width=1024);
          background-size: cover;
          background-repeat: no-repeat;

        }

        .grid div:nth-child(8) {
          grid-row: 8;
          background-image: url(https://i.eurosport.com/2018/12/07/2477900-51456710-2560-1440.jpg?w=1050);
          background-size: cover;
          background-repeat: no-repeat;
        }




        .grid div:nth-child(9) {
          grid-row: 9;
          background-image: url(http://voetbal24.be/UserFiles/images/news/KevinDeBruyne_092.jpg);
          background-size: cover;
          background-repeat: no-repeat;
        }

        .grid div:nth-child(10) {
          grid-row: 10;
          background-image: url(https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/07/25/13/neymar.jpg?w968h681);
          background-size: cover;
          background-repeat: no-repeat;
        }

        .grid div:nth-child(11) {
          grid-row: 11;
          background-image: url(https://www.vi.nl/.imaging/mte/vinl-website-theme/760x506/dam/articles/2018/01/26/vi-9893016.jpg/jcr:content/vi-9893016.jpg);
          background-size: cover;
          background-repeat: no-repeat;
        }

        .grid div:nth-child(12) {
          grid-row: 12;
          background-image: url(https://gvacdn.akamaized.net/Assets/Images_Upload/2018/03/30/a13a722c-261b-11e8-8f69-d462fccfe2be_web_scale_0.0597015_0.0597015__.jpg?maxheight=513&maxwidth=767&scale=both);
          background-size: cover;
          background-repeat: no-repeat;
        }




        .grid div:nth-child(13) {
          grid-row: 13;
          background-image: url(http://voetbal24.be/UserFiles/images/news/meunier-032.jpg);
          background-size: cover;
          background-repeat: no-repeat;
        }

        .grid div:nth-child(14) {
          grid-row: 14;
          background-image: url(https://s.bundesliga.com/assets/img/1170000/1160064_imgw750.jpg);
          background-size: cover;
          background-repeat: no-repeat;
        }

        .grid div:nth-child(15) {
          grid-row: 15;
          background-image: url(https://media1.faz.net/ppmedia/aktuell/sport/3812941919/1.4977873/article_multimedia_overview/fuer-torwart-manuel-neuer-ist.jpg);
          background-size: cover;
          background-repeat: no-repeat;
        }

        .grid div:nth-child(16) {
          grid-row: 16;
          background-image: url(https://files.voetbalprimeur.nl/news/2018/03/14/v2_large_17f8e29cf4d3e9fdda3fe1d2627edadd13694765.png);
          background-size: cover;
          background-repeat: no-repeat;
        }



        .grid div:nth-child(17) {
          grid-row: 17;
          background-image: url(https://e00-marca.uecdn.es/assets/multimedia/imagenes/2018/08/22/15349240203051.jpg);
          background-size: cover;
          background-repeat: no-repeat;
        }

        .grid div:nth-child(18) {
          grid-row: 18;
          background-image: url(https://givemesport.azureedge.net/images/18/01/11/13836f4153fb280a9c255eef6c5a3635/960.jpg);
          background-size: cover;
          background-repeat: no-repeat;
        }

        .grid div:nth-child(19) {
          grid-row: 19;
          background-image: url(https://www.thenational.ae/image/policy:1.120470:1499269884/image/jpeg.jpg?f=16x9&w=1200&$p$f$w=dfa40e8);
          background-size: cover;
          background-repeat: no-repeat;
        }

        .grid div:nth-child(20) {
          grid-row: 20;
          background-image: url(https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/files/styles/image_landscape/public/romelu_lukaku_man_united.jpg?itok=ZORZtX_q);
          background-size: cover;
          background-repeat: no-repeat;
        }





        @media (min-width: 600px) {
          .grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: repeat(17, 1fr);
            grid-template-areas:
            "Messi Messi Messi Messi Iniesta Iniesta"
            "Messi Messi Messi Messi Iniesta Iniesta"
            "Messi Messi Messi Messi Puyol Puyol"
            "Messi Messi Messi Messi Puyol Puyol"
            "Villa Villa Xavi Xavi Robin Robin"
            "Villa Villa Xavi Xavi Robin Robin"
            "Ibra Ibra Eden Eden Eden Kevin"
            "Ibra Ibra Eden Eden Eden Kevin"
            "Ibra Ibra Eden Eden Eden Phil"
            "Neymar Neymar Neymar Eden Eden Phil"
            "Neymar Neymar Neymar Radja Radja Meunier"
            "Neymar Neymar Neymar Radja Radja Meunier"
            "Reus Reus Reus Reus Reus Neuer"
            "Reus Reus Reus Reus Reus Robben"
            "Reus Reus Reus Reus Reus Robbert"
            "Chicha Chicha Forlan Forlan Lukaku"
            "Chicha Chicha Forlan Forlan Lukaku"
          }

          .grid div {
          background-image: url(https://e00-marca.uecdn.es/assets/multimedia/imagenes/2018/08/19/15347041965884.jpg);
          background-repeat: no-repeat;
          grid-area: Messi;
        }

        .grid div:nth-child(2) {
          background-image: url(https://static1.squarespace.com/static/56cb3b9d7c65e45c27f93388/t/5aa64e3824a694a840e74d32/1522767740629/Ini-main.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area: Iniesta;
        }

        .grid div:nth-child(3) {
          background-image: url(http://xevathethao.vn/wp-content/uploads/2017/08/18-ban-thang-cua-doi-truong-huyen-thoai-puyol-cho-barca-205718.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area: Puyol;
        }

        .grid div:nth-child(4) {
          background-image: url(https://nieuws.medialaancdn.be/sites/nieuws.vtm.be/files/styles/larger/public/article/image/2013/07/villa.jpg?itok=K5ii24ZZ);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area:Villa;
        }





        .grid div:nth-child(5) {
          background-image: url(https://www.vi.nl/.imaging/mte/vinl-website-theme/760x506/dam/articles/artikelen/2013/03/13/xavi_1024.jpg/jcr:content/xavi_1024.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area: Xavi;
        }

        .grid div:nth-child(6) {
          background-image: url(https://e0.365dm.com/13/09/800x600/robin-van-persie-manchester-crystal-palace-premier-league_3004821.jpg?20130917113837);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area: Robin;
        }

        .grid div:nth-child(7) {
          background-image: url(https://cdn.newsapi.com.au/image/v1/40d266dcfb50449238c0102d12d49b85?width=1024);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area: Ibra;
        }

        .grid div:nth-child(8) {
          background-image: url(https://i.eurosport.com/2018/12/07/2477900-51456710-2560-1440.jpg?w=1050);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area: Eden;
        }




        .grid div:nth-child(9) {
          background-image: url(http://voetbal24.be/UserFiles/images/news/KevinDeBruyne_092.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area: Kevin;
        }

        .grid div:nth-child(10) {
          background-image: url(https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/07/25/13/neymar.jpg?w968h681);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area: Neymar;
        }

        .grid div:nth-child(11) {
          background-image: url(https://www.vi.nl/.imaging/mte/vinl-website-theme/760x506/dam/articles/2018/01/26/vi-9893016.jpg/jcr:content/vi-9893016.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area: Phil;
        }

        .grid div:nth-child(12) {
          background-image: url(https://gvacdn.akamaized.net/Assets/Images_Upload/2018/03/30/a13a722c-261b-11e8-8f69-d462fccfe2be_web_scale_0.0597015_0.0597015__.jpg?maxheight=513&maxwidth=767&scale=both);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area: Radja;
        }




        .grid div:nth-child(13) {
          background-image: url(http://voetbal24.be/UserFiles/images/news/meunier-032.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area: Meunier;
        }

        .grid div:nth-child(14) {
          background-image: url(https://s.bundesliga.com/assets/img/1170000/1160064_imgw750.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area: Reus;
        }

        .grid div:nth-child(15) {
          background-image: url(https://media1.faz.net/ppmedia/aktuell/sport/3812941919/1.4977873/article_multimedia_overview/fuer-torwart-manuel-neuer-ist.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area: Neuer;
        }

        .grid div:nth-child(16) {
          background-image: url(https://files.voetbalprimeur.nl/news/2018/03/14/v2_large_17f8e29cf4d3e9fdda3fe1d2627edadd13694765.png);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area: Robben;
        }



        .grid div:nth-child(17) {
          background-image: url(https://e00-marca.uecdn.es/assets/multimedia/imagenes/2018/08/22/15349240203051.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area: Robert;
        }

        .grid div:nth-child(18) {
          background-image: url(https://givemesport.azureedge.net/images/18/01/11/13836f4153fb280a9c255eef6c5a3635/960.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area: Chicha;
        }

        .grid div:nth-child(19) {
          background-image: url(https://www.thenational.ae/image/policy:1.120470:1499269884/image/jpeg.jpg?f=16x9&w=1200&$p$f$w=dfa40e8);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area: Forlan;
        }

        .grid div:nth-child(20) {
          background-image: url(https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/files/styles/image_landscape/public/romelu_lukaku_man_united.jpg?itok=ZORZtX_q);
          background-size: cover;
          background-repeat: no-repeat;
          grid-area: Lukaku;
        }

        }

Answer 1

Пожалуйста, проверьте комментарии для вашего CSS:

@media only screen and (min-width: 600px) { /* missing "only screen and" */
      .grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(17, 1fr);
        grid-template-areas:
        "Messi Messi Messi Messi Iniesta Iniesta"
        "Messi Messi Messi Messi Iniesta Iniesta"
        "Messi Messi Messi Messi Puyol Puyol"
        "Messi Messi Messi Messi Puyol Puyol"
        "Villa Villa Xavi Xavi Robin Robin"
        "Villa Villa Xavi Xavi Robin Robin"
        "Ibra   Ibra   Ibra   Eden Eden Kevin" /* Added third Ibra rather than Eden */
        "Ibra   Ibra   Ibra   Eden Eden Kevin" /* Added third Ibra rather than Eden */
        "Ibra   Ibra   Ibra   Eden Eden Phil"  /* Added third Ibra rather than Eden */
        "Neymar Neymar Neymar Eden Eden Phil"
        "Neymar Neymar Neymar Radja Radja Meunier"
        "Neymar Neymar Neymar Radja Radja Meunier"
        "Reus Reus Reus Reus Reus Neuer"
        "Reus Reus Reus Reus Reus Robben"
        "Reus Reus Reus Reus Reus Robert" /* there was incorrect name "Robbert" */
        "Chicha Chicha Forlan Forlan Lukaku Lukaku" /* missed 6th name "Lukaku" */
        "Chicha Chicha Forlan Forlan Lukaku Lukaku"; /* missed 6th name "Lukaku" */
      }
}

ОБНОВЛЕНО: Что если это изменение поможет:

@media screen and (min-width: 600px) {
    .grid {
        height: calc(150px * 17); /* new */
    }
    .grid div {
        background-position: center center; /* new */
    }
}

Answer 2

Что-то не так с вашим медиа-запросом, попробуйте следующий медиа-запрос, который работает для меня.

 @media only screen (min-width: 600px){