I need to adjust the size of the initial "generated" cell in a grid. The grid is not present in the HTML markup until JavaScript prints RSS information on it, making it difficult to target specific rows or cells directly.
Note: The first element is hidden with display:none; because it repeats itself.
Desired outcome: https://i.sstatic.net/dJNHO.jpg
Current 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%;
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"
);
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);
});