Change size of the first cell

Question

I want to change the size of the first "generated " cell of a grid. The grid doesn't exist in html until the javascript print RSS infos on it, so I can't directly target a row or a cell.

Note : The first element is set to display:none; because it repeats itself.

The wanted outcome : https://i.sstatic.net/dJNHO.jpg

Actual grid : https://codepen.io/jinzagon/pen/JjXMXxo

CSS

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;
  a {
    text-decoration: none;
    color: #455A64;
    &:hover, &:focus {
      color: #2196F3;
    }
  }
  h2 {
    padding: 1rem 1rem;
    margin: 0;
  }
}

article:first-of-type {
  display:none;
}

JS

const 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

...so I can't directly target a row or a cell.

You can use 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>