2

I'm currently putting together a fluid grid. The problem I have is columns will have variable heights due to the length of the text inside of them. With that in mind it's making my rows stretch, thus making the elements inside of them stretch as well. More particularly the blue buttons shown in the example below at a 960px viewport width and up. How can I keep these elements from stretching and keeping them at their original dimensions?

.item {
  display: -ms-grid;
  display: grid;
  border-bottom: 1px solid #dceaec;
  padding: 30px 0 22px;
  -ms-grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  -ms-grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-button item-button' 'item-footer item-footer';
  grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-button item-button' 'item-footer item-footer';
}

.item-thumbnail {
  -ms-grid-area: item-thumbnail;
  grid-area: item-thumbnail;
}

.item-heading {
  margin-bottom: 16px;
  font-size: 14px;
  color: #0076ff;
  letter-spacing: .8px;
  text-transform: uppercase;
  -ms-grid-area: item-heading;
  grid-area: item-heading;
}

.item-product {
  -ms-grid-area: item-product;
  grid-area: item-product;
}

.item-name {
  margin-bottom: 20px;
  font-family: LabGrotesque;
  font-size: 16px;
  font-weight: 900;
  color: #111516;
}

.item-price {
  margin-bottom: 4px;
  font-size: 20px;
  font-stretch: normal;
  line-height: 1.65;
  color: #111516;
  letter-spacing: normal;
}

.item-source {
  margin-bottom: 16px;
  font-size: 16px;
  color: #848f91;
  letter-spacing: -.3px;
}

.item-button {
  display: block;
  margin-bottom: 20px;
  border-radius: 25px;
  padding: 14px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 2.6px;
  background-color: #007eff;
  -ms-grid-area: item-button;
  grid-area: item-button;
}

.item-footer {
  -ms-grid-area: item-footer;
  grid-area: item-footer;
}

.item-description {
  margin-bottom: 40px;
}

.item-read-more {
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  color: #111;
  text-decoration: none;
  letter-spacing: 2.6px;
}

@media (min-width: 600px) {
  .item {
    -ms-grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-thumbnail item-button' 'item-footer item-footer';
    grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-thumbnail item-button' 'item-footer item-footer';
  }
}

@media (min-width: 960px) {
  .grid {
    display: -ms-grid;
    display: grid;
    margin-bottom: 30px;
    border-bottom: 3px solid #111;
    padding-bottom: 16px;
    -ms-grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .item-heading {
    margin-bottom: 42px;
  }
  .item {
    border-bottom: none;
    padding-top: 0;
    padding-right: 13px;
    -ms-grid-template: 'item-heading item-heading' 'item-thumbnail item-thumbnail' 'item-product item-product' 'item-button item-button' 'item-footer item-footer';
    grid-template: 'item-heading item-heading' 'item-thumbnail item-thumbnail' 'item-product item-product' 'item-button item-button' 'item-footer item-footer';
  }
  .item:not(:first-of-type) {
    border-left: 1px solid #dceaec;
    padding-left: 13px;
  }
  .item-button {
    max-width: 150px;
  }
}
<div class="grid">
  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut. Morbi non libero egestas, imperdiet orci sit amet, dignissim augue. Fusce fermentum aliquet dolor.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut. 
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
Carl Edwards
  • 13,826
  • 11
  • 57
  • 119
  • If I understand the problem correctly, you are having trouble achieving equal height rows across grid containers. This is a common problem and limitation with CSS grid and flex. Because the grid items are not siblings (they are more like cousins) they have no association and can't relate to each other. You can either put them all in the same container, wait for implementation of the `subgrid` feature, or use a script. – Michael Benjamin Mar 07 '19 at 14:20
  • 1
    add `align-items: flex-start` to `item` class for the *stretching* problem... – kukkuz Mar 07 '19 at 14:21
  • @Michael_B can you elaborate on putting them all in the same container? – Carl Edwards Mar 07 '19 at 14:25
  • @kukkuz `flex-start` seemed to work on all items when I applied it to the grid itself but I'd just like to know *why*. Any idea? – Carl Edwards Mar 07 '19 at 14:30
  • Instead of having separate containers for all the grid items, put them all in one container, making them all siblings. Then you'll have no problem with placement and alignment. However, this may not be a feasible HTML structure. – Michael Benjamin Mar 07 '19 at 14:32
  • @CarlEdwards the default value of `align-items` is *stretch*... – kukkuz Mar 07 '19 at 14:42
  • 1
    @kukkuz I never knew that `align-items` also applied towards grid layout until now. Thanks for saving me on this one. I'm gonna try to reopen this as the none of the posts suggested by @Michael_B when he marked this as a duplicate point this out. – Carl Edwards Mar 07 '19 at 14:46
  • @Michael_B Any chance we can reopen this? I took a look at all of the posts and links within them you suggested but none actually point to a **current** solution (either non-semantic or using sub-grid). kukkuz seemed to post something that's not only valid but fully compatible with most modern browsers. – Carl Edwards Mar 07 '19 at 14:49
  • Vote to reopen. I can't from the mobile app. – Michael Benjamin Mar 07 '19 at 14:54
  • @Michael_B put in my vote but I either need a few more and/or someone with a higher rep to reopen it. Whenever you have the chance to get back on the desktop version it would be highly appreciated if you could for current and future devs. – Carl Edwards Mar 07 '19 at 14:56
  • Will do. Back on desktop in a few hours. – Michael Benjamin Mar 07 '19 at 14:58
  • 1
    @kukkuz Michael_B reopened the post so please feel free to post your answer. Just note for this to work I applied `flex-start` to the grid. – Carl Edwards Mar 07 '19 at 15:24

2 Answers2

2

As per the comments to the question, for the stretching issue, you can add align-items: flex-start to grid class - see demo below:

.item {
  display: -ms-grid;
  display: grid;
  border-bottom: 1px solid #dceaec;
  padding: 30px 0 22px;
  -ms-grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  -ms-grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-button item-button' 'item-footer item-footer';
  grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-button item-button' 'item-footer item-footer';
}

.item-thumbnail {
  -ms-grid-area: item-thumbnail;
  grid-area: item-thumbnail;
}

.item-heading {
  margin-bottom: 16px;
  font-size: 14px;
  color: #0076ff;
  letter-spacing: .8px;
  text-transform: uppercase;
  -ms-grid-area: item-heading;
  grid-area: item-heading;
}

.item-product {
  -ms-grid-area: item-product;
  grid-area: item-product;
}

.item-name {
  margin-bottom: 20px;
  font-family: LabGrotesque;
  font-size: 16px;
  font-weight: 900;
  color: #111516;
}

.item-price {
  margin-bottom: 4px;
  font-size: 20px;
  font-stretch: normal;
  line-height: 1.65;
  color: #111516;
  letter-spacing: normal;
}

.item-source {
  margin-bottom: 16px;
  font-size: 16px;
  color: #848f91;
  letter-spacing: -.3px;
}

.item-button {
  display: block;
  margin-bottom: 20px;
  border-radius: 25px;
  padding: 14px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 2.6px;
  background-color: #007eff;
  -ms-grid-area: item-button;
  grid-area: item-button;
}

.item-footer {
  -ms-grid-area: item-footer;
  grid-area: item-footer;
}

.item-description {
  margin-bottom: 40px;
}

.item-read-more {
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  color: #111;
  text-decoration: none;
  letter-spacing: 2.6px;
}

@media (min-width: 600px) {
  .item {
    -ms-grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-thumbnail item-button' 'item-footer item-footer';
    grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-thumbnail item-button' 'item-footer item-footer';
  }
}

@media (min-width: 960px) {
  .grid {
    display: -ms-grid;
    display: grid;
    margin-bottom: 30px;
    border-bottom: 3px solid #111;
    padding-bottom: 16px;
    -ms-grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: flex-start; /* ADDED */
  }
  .item-heading {
    margin-bottom: 42px;
  }
  .item {
    border-bottom: none;
    padding-top: 0;
    padding-right: 13px;
    -ms-grid-template: 'item-heading item-heading' 'item-thumbnail item-thumbnail' 'item-product item-product' 'item-button item-button' 'item-footer item-footer';
    grid-template: 'item-heading item-heading' 'item-thumbnail item-thumbnail' 'item-product item-product' 'item-button item-button' 'item-footer item-footer';
  }
  .item:not(:first-of-type) {
    border-left: 1px solid #dceaec;
    padding-left: 13px;
  }
  .item-button {
    max-width: 150px;
  }
}
<div class="grid">
  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut. Morbi non libero egestas, imperdiet orci sit amet, dignissim augue. Fusce fermentum aliquet dolor.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut. 
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
  
    <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
1

You can use the justify-items (like justify-items: start;) to keep their children from stretching.

There is a really great article/cheat-sheet on CSS Grids on css-tricks.com

.item {
  display: -ms-grid;
  display: grid;
  border-bottom: 1px solid #dceaec;
  padding: 30px 0 22px;
  -ms-grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  -ms-grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-button item-button' 'item-footer item-footer';
  grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-button item-button' 'item-footer item-footer';
  justify-items: start;
}

.item-thumbnail {
  -ms-grid-area: item-thumbnail;
  grid-area: item-thumbnail;
}

.item-heading {
  margin-bottom: 16px;
  font-size: 14px;
  color: #0076ff;
  letter-spacing: .8px;
  text-transform: uppercase;
  -ms-grid-area: item-heading;
  grid-area: item-heading;
}

.item-product {
  -ms-grid-area: item-product;
  grid-area: item-product;
}

.item-name {
  margin-bottom: 20px;
  font-family: LabGrotesque;
  font-size: 16px;
  font-weight: 900;
  color: #111516;
}

.item-price {
  margin-bottom: 4px;
  font-size: 20px;
  font-stretch: normal;
  line-height: 1.65;
  color: #111516;
  letter-spacing: normal;
}

.item-source {
  margin-bottom: 16px;
  font-size: 16px;
  color: #848f91;
  letter-spacing: -.3px;
}

.item-button {
  display: block;
  margin-bottom: 20px;
  border-radius: 25px;
  padding: 14px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 2.6px;
  background-color: #007eff;
  -ms-grid-area: item-button;
  grid-area: item-button;
}

.item-footer {
  -ms-grid-area: item-footer;
  grid-area: item-footer;
}

.item-description {
  margin-bottom: 40px;
}

.item-read-more {
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  color: #111;
  text-decoration: none;
  letter-spacing: 2.6px;
}

@media (min-width: 600px) {
  .item {
    -ms-grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-thumbnail item-button' 'item-footer item-footer';
    grid-template: 'item-thumbnail item-heading' 'item-thumbnail item-product' 'item-thumbnail item-button' 'item-footer item-footer';
  }
}

@media (min-width: 960px) {
  .grid {
    display: -ms-grid;
    display: grid;
    margin-bottom: 30px;
    border-bottom: 3px solid #111;
    padding-bottom: 16px;
    -ms-grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .item-heading {
    margin-bottom: 42px;
  }
  .item {
    border-bottom: none;
    padding-top: 0;
    padding-right: 13px;
    -ms-grid-template: 'item-heading item-heading' 'item-thumbnail item-thumbnail' 'item-product item-product' 'item-button item-button' 'item-footer item-footer';
    grid-template: 'item-heading item-heading' 'item-thumbnail item-thumbnail' 'item-product item-product' 'item-button item-button' 'item-footer item-footer';
  }
  .item:not(:first-of-type) {
    border-left: 1px solid #dceaec;
    padding-left: 13px;
  }
  .item-button {
    max-width: 150px;
  }
}
<div class="grid">
  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut. Morbi non libero egestas, imperdiet orci sit amet, dignissim augue. Fusce fermentum aliquet dolor.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>

  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>

  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>

  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>

  <div class="item">
    <div class="item-thumbnail">Thumbnail</div>

    <div class="item-heading">Header</div>

    <div class="item-product">
      <div class="item-name">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <div class="item-price">
        $9.99
      </div>

      <div class="item-source">
        Source
      </div>
    </div>

    <div class="item-button">Button</div>

    <div class="item-footer">
      <div class="item-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices sapien dui, non ornare eros egestas ut.
      </div>

      <a href="" class="item-read-more">READ MORE >></a>
    </div>
  </div>
</div>
lumio
  • 7,428
  • 4
  • 40
  • 56