<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://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-heart-86ec9beca6e804af6db630e35a1e12ebd169103c0156e881e7f8a38933e1a546.png" alt="like">
      10
    </span>
    <span class="unicorn count">
      <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-unicorn-4a230c2064797b2aa08c12f522a6df8f6c9a0461839310c17ae01e5d95c6b67c.png" alt="unicorn">
      3
    </span>
    <span class="bookmark count">
      <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-bookmark-90f177c2910f9f8856fe23fc018a40d62f0a06263eab100cd5b710cad515ba04.png" alt="readinglist">
      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://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-heart-86ec9beca6e804af6db630e35a1e12ebd169103c0156e881e7f8a38933e1a546.png" alt="like">
      142857
    </span>
    <span class="unicorn count">
      <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-unicorn-4a230c2064797b2aa08c12f522a6df8f6c9a0461839310c17ae01e5d95c6b67c.png" alt="unicorn">
      655
    </span>
    <span class="bookmark count">
      <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-bookmark-90f177c2910f9f8856fe23fc018a40d62f0a06263eab100cd5b710cad515ba04.png" alt="readinglist">
      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://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-heart-86ec9beca6e804af6db630e35a1e12ebd169103c0156e881e7f8a38933e1a546.png" alt="like">
      321
    </span>
    <span class="unicorn count">
      <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-unicorn-4a230c2064797b2aa08c12f522a6df8f6c9a0461839310c17ae01e5d95c6b67c.png" alt="unicorn">
      123
    </span>
    <span class="bookmark count">
      <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-bookmark-90f177c2910f9f8856fe23fc018a40d62f0a06263eab100cd5b710cad515ba04.png" alt="readinglist">
      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 {
  width: 21px;
  height: 21px;
  vertical-align: -4px;
}
.heart {
  grid-column: 2;
}
.unicorn {
  grid-column: 3;
}
.bookmark {
  grid-column: 4;
}