更改第一个单元格的大小

Question

我想更改网格的第一个“生成”单元格的大小。在 javascript 在其上打印 RSS 信息之前，html 中不存在网格，因此我无法直接定位行或单元格。注意：第一个元素设置为display:none;因为它会重复自己。想要的结果： https: //i.imgur.com/x07Egoz.png实际网格： https: //codepen.io/jinzagon/pen/JjXMXxoCSSbody {  margin: 1rem;  display: grid;  background-color:#272d32;  grid-template-columns: repeat(auto-fit, minmax(250px, 250px));  grid-gap: 2rem;}img {  max-width: 100%;  box-shadow: 0 0 3px #B0BEC5;    width: 100%;/*  height: 100%;*/  object-fit: cover;  display: block; }article {  background: #ECEFF1;  border-radius: 4px;  overflow: hidden;  height: 250px;  font: 12px/1.1 system-ui, sans-serif;  a {    text-decoration: none;    color: #455A64;    &:hover, &:focus {      color: #2196F3;    }  }  h2 {    padding: 1rem 1rem;    margin: 0;  }}article:first-of-type {  display:none;}JSconst RSS_URL = 'https://cors-anywhere.herokuapp.com/https://fitgirl-repacks.site/feed/';fetch(RSS_URL)  .then(response => response.text())  .then(str => new window.DOMParser().parseFromString(str, "text/xml"))  .then(data => {    console.log(data);    const items = data.querySelectorAll("item");    let html = ``;    items.forEach(el => {      var image = null;      var encoded = new window.DOMParser().parseFromString(        el.getElementsByTagNameNS("*", "encoded").item(0).innerHTML,        "text/html"      );      // console.log(encoded.querySelectorAll('img').item(0) ? null.src)      if (encoded.querySelector('img') != null) {        image = encoded.querySelector('img').src;      } else {        return true;      }                  html += `        <article>         <!--<h2>${el.querySelector("title ").innerHTML}          </h2>            <a  href="${el.querySelector("link").innerHTML}" target="_blank" rel="noopener">                         </a>-->            <img src="${image}" alt="" />        </article>      `;    });    document.body.insertAdjacentHTML("beforeend", html);  });

Answer 1

...所以我不能直接定位一行或一个单元格。

你可以使用nth-of-type(2)？

body {

  margin: 1rem;

  display: grid;

  background-color: #272d32;

  grid-template-columns: repeat(auto-fit, minmax(250px, 250px));

  grid-gap: 2rem;

}

img {

  max-width: 100%;

  box-shadow: 0 0 3px #B0BEC5;

  width: 100%;

  /*  height: 100%;*/

  object-fit: cover;

  display: block;

}

article {

  background: #ECEFF1;

  border-radius: 4px;

  overflow: hidden;

  height: 250px;

  font: 12px/1.1 system-ui, sans-serif;

}

article a {

  text-decoration: none;

  color: #455A64;

}

article a:hover,

article a:focus {

  color: #2196F3;

}

article h2 {

  padding: 1rem 1rem;

  margin: 0;

}

article:first-of-type {

  display: none;

}

article:nth-of-type(2) {

  grid-column: 1 / 3;

  grid-row: 1 / 3;

  height: calc(500px + 2rem)

}

<article>

  <!--<h2>Upcoming repacks

          </h2>

            <a  href="https://fitgirl-repacks.site/upcoming-repacks-3/" target="_blank" rel="noopener">

             

            </a>-->

  <img src="https://i112.fastpic.ru/big/2020/0904/6f/390a35bb4af268efc406df7092e0566f.jpg" alt="">

</article>

<article>

  <!--<h2>WRC 9 FIA World Rally Championship – Deluxe Edition + 4 DLCs

          </h2>

            <a  href="https://fitgirl-repacks.site/wrc-9/" target="_blank" rel="noopener">

             

            </a>-->

  <img src="https://i112.fastpic.ru/big/2020/0904/6f/390a35bb4af268efc406df7092e0566f.jpg" alt="">

</article>

<article>

  <!--<h2>Desperados III – v1.4.11.r35885.F + DLC

          </h2>

            <a  href="https://fitgirl-repacks.site/desperados-3/" target="_blank" rel="noopener">

             

            </a>-->

  <img src="https://i112.fastpic.ru/big/2020/0611/b0/9d2d6cd9831af6219c231b80a66050b0.jpg" alt="">

</article>

<article>

  <!--<h2>Ary and the Secret of Seasons

          </h2>

            <a  href="https://fitgirl-repacks.site/ary-and-the-secret-of-seasons/" target="_blank" rel="noopener">

             

            </a>-->

  <img src="https://i112.fastpic.ru/big/2020/0902/48/2cf078dae0fcbff545c79346f80fcd48.jpg" alt="">

</article>

<article>

  <!--<h2>Crusader Kings III – v1.0.2 + 2 DLCs + Multiplayer

          </h2>

            <a  href="https://fitgirl-repacks.site/crusader-kings-3/" target="_blank" rel="noopener">

             

            </a>-->

  <img src="https://i112.fastpic.ru/big/2020/0902/43/eca1095d8782e7bdcd6f6ea5cfa45e43.jpg" alt="">

</article>

<article>

  <!--<h2>Iron Harvest – v1.0.0.1600 rev.37863 (Build 5487982)

          </h2>

            <a  href="https://fitgirl-repacks.site/iron-harvest/" target="_blank" rel="noopener">

             

            </a>-->

  <img src="https://i112.fastpic.ru/big/2020/0901/ca/3b9619cd2c253ec78d94abfc00415eca.jpg" alt="">

</article>

<article>

  <!--<h2>Evergate – v1.02/Build 5487187

          </h2>

            <a  href="https://fitgirl-repacks.site/evergate/" target="_blank" rel="noopener">

             

            </a>-->

  <img src="https://i112.fastpic.ru/big/2020/0901/e1/93dd0a0484b586c8df76480fe36ccce1.jpg" alt="">

</article>

<article>

  <!--<h2>Radical Relocation – v1.0.0P9 + All Levels Unlocker

          </h2>

            <a  href="https://fitgirl-repacks.site/radical-relocation/" target="_blank" rel="noopener">

             

            </a>-->

  <img src="https://i112.fastpic.ru/big/2020/0831/89/975d31cea79f6ac8c543219b05be0489.jpg" alt="">

</article>

<article>

  <!--<h2>Immortal Realms: Vampire Wars

          </h2>

            <a  href="https://fitgirl-repacks.site/immortal-realms-vampire-wars/" target="_blank" rel="noopener">

             

            </a>-->

  <img src="https://i112.fastpic.ru/big/2020/0831/ec/9e7ee3ca4c50ca7b1ebdd48647fba4ec.jpg" alt="">

</article>

</body>

Answer 2

您可能希望根据需要添加和调整跨度值：https grid-column: //codepen.io/oieeaaaa/pen/dyMJXVRgrid-rowarticle:first-of-type