Elements stretching in CSS Grid2019 Community Moderator ElectionPositioning content of grid items in primary container (subgrid feature)Set cellpadding and cellspacing in CSS?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?Change an HTML5 input's placeholder color with CSSHow can I transition height: 0; to height: auto; using CSS?Is margin possible for a <div> in css?How do CSS triangles work?How do I vertically center text with CSS?Is it possible to apply CSS to half of a character?List bullets like 1) 2) 3)

How Could an Airship Be Repaired Mid-Flight

how to write formula in word in latex

Co-worker team leader wants to inject his friend's awful software into our development. What should I say to our common boss?

How to simplify this time periods definition interface?

How do I hide Chekhov's Gun?

Bach's Toccata and Fugue in D minor breaks the "no parallel octaves" rule?

Why would a flight no longer considered airworthy be redirected like this?

Existence of subset with given Hausdorff dimension

What are substitutions for coconut in curry?

Is there a data structure that only stores hash codes and not the actual objects?

If curse and magic is two sides of the same coin, why the former is forbidden?

What's the meaning of “spike” in the context of “adrenaline spike”?

Python if-else code style for reduced code for rounding floats

Is there a higher dimension analogue of Noether's theorem?

How difficult is it to simply disable/disengage the MCAS on Boeing 737 Max 8 & 9 Aircraft?

Welcoming 2019 Pi day: How to draw the letter π?

Can I use USB data pins as power source

What is a^b and (a&b)<<1?

Instead of Universal Basic Income, why not Universal Basic NEEDS?

A sequence that has integer values for prime indexes only:

How to make healing in an exploration game interesting

Min function accepting varying number of arguments in C++17

What has been your most complicated TikZ drawing?

What do Xenomorphs eat in the Alien series?

Elements stretching in CSS Grid

2019 Community Moderator ElectionPositioning content of grid items in primary container (subgrid feature)Set cellpadding and cellspacing in CSS?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?Change an HTML5 input's placeholder color with CSSHow can I transition height: 0; to height: auto; using CSS?Is margin possible for a <div> in css?How do CSS triangles work?How do I vertically center text with CSS?Is it possible to apply CSS to half of a character?List bullets like 1) 2) 3)

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>

edited Mar 7 at 15:33

kukkuz

27.9k62867

asked Mar 7 at 14:07

Carl Edwards

5,47652464

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_B
Mar 7 at 14:20

1

add align-items: flex-start to item class for the stretching problem...

– kukkuz
Mar 7 at 14:21

@Michael_B can you elaborate on putting them all in the same container?

– Carl Edwards
Mar 7 at 14:25

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 7 at 14:46

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 7 at 15:24

|
show 7 more comments

.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>

edited Mar 7 at 15:33

kukkuz

27.9k62867

asked Mar 7 at 14:07

Carl Edwards

5,47652464

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_B
Mar 7 at 14:20

1

add align-items: flex-start to item class for the stretching problem...

– kukkuz
Mar 7 at 14:21

@Michael_B can you elaborate on putting them all in the same container?

– Carl Edwards
Mar 7 at 14:25

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 7 at 14:46

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 7 at 15:24

|
show 7 more comments

.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>

edited Mar 7 at 15:33

kukkuz

27.9k62867

asked Mar 7 at 14:07

Carl Edwards

5,47652464

.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>

.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>

.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>

html css css3 alignment css-grid

edited Mar 7 at 15:33

kukkuz

27.9k62867

asked Mar 7 at 14:07

Carl Edwards

5,47652464

edited Mar 7 at 15:33

kukkuz

27.9k62867

asked Mar 7 at 14:07

Carl Edwards

5,47652464

edited Mar 7 at 15:33

kukkuz

27.9k62867

edited Mar 7 at 15:33

kukkuz

27.9k62867

edited Mar 7 at 15:33

kukkuz

27.9k62867

asked Mar 7 at 14:07

Carl Edwards

5,47652464

asked Mar 7 at 14:07

Carl Edwards

5,47652464

asked Mar 7 at 14:07

Carl Edwards

5,47652464

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_B
Mar 7 at 14:20

1

add align-items: flex-start to item class for the stretching problem...

– kukkuz
Mar 7 at 14:21

@Michael_B can you elaborate on putting them all in the same container?

– Carl Edwards
Mar 7 at 14:25

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 7 at 14:46

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 7 at 15:24

|
show 7 more comments

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_B
Mar 7 at 14:20

1

add align-items: flex-start to item class for the stretching problem...

– kukkuz
Mar 7 at 14:21

@Michael_B can you elaborate on putting them all in the same container?

– Carl Edwards
Mar 7 at 14:25

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 7 at 14:46

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 7 at 15:24

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_B
Mar 7 at 14:20

add align-items: flex-start to item class for the stretching problem...

– kukkuz
Mar 7 at 14:21

@Michael_B can you elaborate on putting them all in the same container?

– Carl Edwards
Mar 7 at 14:25

@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 7 at 14:46

@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 7 at 15:24

|
show 7 more comments

2 Answers
2

active

oldest

votes

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>

answered Mar 7 at 15:31

kukkuz

27.9k62867

add a comment |

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>

answered Mar 7 at 15:25

lumio

4,79122238

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55045728%2felements-stretching-in-css-grid%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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>

answered Mar 7 at 15:31

kukkuz

27.9k62867

add a comment |

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>

answered Mar 7 at 15:31

kukkuz

27.9k62867

add a comment |

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>

answered Mar 7 at 15:31

kukkuz

27.9k62867

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>

.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>

.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>

answered Mar 7 at 15:31

kukkuz

27.9k62867

answered Mar 7 at 15:31

kukkuz

27.9k62867

answered Mar 7 at 15:31

kukkuz

27.9k62867

answered Mar 7 at 15:31

kukkuz

27.9k62867

add a comment |

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>

answered Mar 7 at 15:25

lumio

4,79122238

add a comment |

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>

answered Mar 7 at 15:25

lumio

4,79122238

add a comment |

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>

answered Mar 7 at 15:25

lumio

4,79122238

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>

.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>

.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>

answered Mar 7 at 15:25

lumio

4,79122238

answered Mar 7 at 15:25

lumio

4,79122238

answered Mar 7 at 15:25

lumio

4,79122238

answered Mar 7 at 15:25

lumio

4,79122238

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ggtcf

2 Answers
2

Your Answer

Post as a guest

2 Answers
2

2 Answers
2

Post as a guest

Popular posts from this blog

Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

2 Answers 2

2 Answers 2

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme

2 Answers
2

2 Answers
2

2 Answers
2