<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <main id="app">
      <section class="grid">
      </section>
    </main>
  </body>
  <script src="practice.js"></script>
</html>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
.box {
  border: 1px solid #ccc;
  padding: 0 1rem;
}
const boxes = [
  {
    title: "Title 1",
    description: "Description 1"
  },
  {
    title: "Title 2",
    description: "Description 2"
  },
  {
    title: "Title 3",
    description: "Description 3"
  },
  {
    title: "Title 4",
    description: "Description 4"
  }
];

function renderBoxes() {
  const boxesHtml = boxes
    .map(
      box => `
      <div class="box">
        <h2>${box.title}</h2>
        <p>${box.description}</p>
      </div>
    `
    )
    .join("");
  document.querySelector(".grid").insertAdjacentHTML("afterbegin", boxesHtml);
}

renderBoxes();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.