body {
  margin: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 2rem;
  background: green;
}
img {
  max-width: 100%;
  box-shadow: 0 0 3px #B0BEC5;
}

article {
  background: #ECEFF1;
  border-radius: 4px;
  overflow: hidden;
  font: 12px/1.1 system-ui, sans-serif;
  a {
    text-decoration: none;
    color: #455A64;
    &:hover, &:focus {
      color: #2196F3;
    }
  }
  h2 {
    padding: 1rem 1rem;
    margin: 0;
  }
}
View Compiled
const RSS_URL = `https://codepen.io/picks/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 => {
      html += `
        <article>
          <img src="${el.querySelector("link").innerHTML}/image/large.png" alt="">
          <h2>
            <a href="${el.querySelector("link").innerHTML}" target="_blank" rel="noopener">
              ${el.querySelector("title").innerHTML}
            </a>
          </h2>
        </article>
      `;
    });
    document.body.insertAdjacentHTML("beforeend", html);
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Packages

This Pen doesn't use any packages.