<main>
  <section class=article-card>
    <div class="user-img">
      <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SriAFu_4--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/83809/6eddcc8e-8942-4b2e-85ed-34c528ac1f14.png">
    </div>
    <h1>Hello World</h1>
    <span class="heart count">
      <img src="https://dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" alt="like">
      10
    </span>
    <span class="unicorn count">
      <img src="https://dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" alt="unicorn">
      3
    </span>
    <span class="bookmark count">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 24" role="img" aria-hidden="true" class="crayons-icon">
        <path d="M5 2h14a1 1 0 011 1v19.143a.5.5 0 01-.766.424L12 18.03l-7.234 4.536A.5.5 0 014 22.143V3a1 1 0 011-1zm13 2H6v15.432l6-3.761 6 3.761V4z"></path>
      </svg>
      1
    </span>
  </section>
  <section class=article-card>
    <div class="user-img">
      <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SriAFu_4--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/83809/6eddcc8e-8942-4b2e-85ed-34c528ac1f14.png">
    </div>
    <h1>Pancakes with Cheese: A Breakfast Manifesto</h1>
    <span class="heart count">
      <img src="https://dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" alt="like">
      142857
    </span>
    <span class="unicorn count">
      <img src="https://dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" alt="unicorn">
      655
    </span>
    <span class="bookmark count">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 24" role="img" aria-hidden="true" class="crayons-icon">
        <path d="M5 2h14a1 1 0 011 1v19.143a.5.5 0 01-.766.424L12 18.03l-7.234 4.536A.5.5 0 014 22.143V3a1 1 0 011-1zm13 2H6v15.432l6-3.761 6 3.761V4z"></path>
      </svg>
      1024
    </span>
  </section>
  <section class=article-card>
    <div class="user-img">
      <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SriAFu_4--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/83809/6eddcc8e-8942-4b2e-85ed-34c528ac1f14.png">
    </div>
    <h1>Read about my new product</h1>
    <span class="heart count">
      <img src="https://dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" alt="like">
      321
    </span>
    <span class="unicorn count">
      <img src="https://dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" alt="unicorn">
      123
    </span>
    <span class="bookmark count">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 24" role="img" aria-hidden="true" class="crayons-icon">
        <path d="M5 2h14a1 1 0 011 1v19.143a.5.5 0 01-.766.424L12 18.03l-7.234 4.536A.5.5 0 014 22.143V3a1 1 0 011-1zm13 2H6v15.432l6-3.761 6 3.761V4z"></path>
      </svg>
      2
    </span>
  </section>
</main>

/*
  Note: This doesn't work yet!

  This demo is in anticipation of the `subgrid`
  keyword being introduced by Grid Level 2, and
  should hopefully just start working as browsers
  implement it
*/

:root {
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
h1, h2, h3 {
  margin: 0;
  font-weight: 700;
}

main {
  width: 550px;
  display: grid;
  grid-template-columns: repeat(5, auto);
}

.article-card {
  grid-column: 1 / -1;
  padding: calc(1vw + 7px);
  border: 1px solid #d6d6d6;
  border-radius: 3px;
  margin: 2rem 0;
  box-shadow: 3px 3px 0 #bababa;
  
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 2;
}

.user-img {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  margin-right: 1rem;
}
.user-img img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
}
.article-card h1 {
  grid-row: 1;
  grid-column: 2 / 6;
  font-size: 2.7rem;
  margin-bottom: 2rem;
}
.count {
  grid-row: 2;
  margin-right: 1rem;
  font-size: 1.7rem;
}
.count img, .bookmark svg {
  width: 21px;
  height: 21px;
  vertical-align: -4px;
}
.heart {
  grid-column: 2;
}
.unicorn {
  grid-column: 3;
}
.bookmark {
  grid-column: 4;
}