Avoiding multiple rows when lining up content in grids - html

Question

I currently have a grid showing products. Full screen there is 3 products and once the screen gets smaller it shows 4 products.
My issue is, some names of the products are longer then others. In this example, as the container gets smaller, the product name of the 2nd and 3rd item moves to a new line faster then the 1st does.
Ideally, I'd like the Price and the SHOP buttons to be even with one another when this happens.
The only way I can think about achieving this is to have 3 separate rows for the picture, name, and price/button. By doing this, it makes it kind of difficult for the 4th item to appear nicely without making completely separate containers for different window sizes and loading the images twice.
Does anyone have any ideas on how I can achieve this without making multiple rows for each item?
*, input, :before, :after {
box-sizing: border-box;
}
h2.product-header {
font-family: "Open Sans", sans-serif;
font-size: 23px;
color: #231f20;
letter-spacing: 3px;
text-align: center;
padding-bottom: 50px;
border-bottom: 2px solid #c2c1c5;
}
.row {
display: block;
font-size: 0;
}
.row .grid {
vertical-align: top;
display: inline-block;
font-size: 18px;
}
.grid.one-third {
width: 33.33%;
}
#index-new-arrivals {
font-family: "Open Sans", sans-serif;
padding: 75px 50px;
}
#index-new-arrivals .grid {
width: 33.33%;
}
#index-new-arrivals .grid.product {
margin: 75px 0 15px 0;
padding: 0 7%;
}
#index-new-arrivals .grid.product:last-child { display:none;}
#index-new-arrivals .grid.product > div {
padding-bottom: 150%;
position: relative;
}
#index-new-arrivals .grid.product > div > div {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
}
#index-new-arrivals .grid.product-name {
margin-bottom: 15px;
padding: 0 7%;
vertical-align: middle;
}
#index-new-arrivals .grid.product h3 {
font-size: 18px;
text-align: center;
margin-top: 25px;
text-transform: uppercase;
letter-spacing: 4px;
color: #231f20;
font-size: 19px;
}
#index-new-arrivals .grid.product p {
font-size: 18px;
text-align: center;
text-transform: uppercase;
letter-spacing: 4px;
color: #231f20;
font-size: 19px;
}
#index-new-arrivals .grid.product a {
font-size: 15px;
letter-spacing: 2px;
display: block;
background-color: #3e3e3f;
max-width: 230px;
width: 80%;
margin: 25px auto 100px auto;
padding: 15px 0;
text-align: center;
text-transform: uppercase;
color: #fff;
}
#media (max-width:880px) {
#index-new-arrivals .grid {
width: 50%;
}
#index-new-arrivals .grid.product:last-child { display:inline-block;}
}
<section id="index-new-arrivals">
<div class="row" style="border:1px solid blue;">
<div class="grid product" style="border:1px solid grey;">
<div>
<div style="background-image:url('//cdn.shopify.com/s/files/1/2497/8510/products/9126_BROWN_1_500x.jpg?v=1509207888');"></div>
</div>
<h3>Convertible Belt Bag</h3>
<p>$50</p>
Shop
</div>
<div class="grid product" style="border:1px solid grey;">
<div>
<div style="background-image:url('//cdn.shopify.com/s/files/1/2497/8510/products/9113_BLACK_500x.jpg?v=1509207748');"></div>
</div>
<h3>Mini Quilted Backpack</h3>
<p>$54</p>
Shop
</div>
<div class="grid product" style="border:1px solid grey;">
<div>
<div style="background-image:url('//cdn.shopify.com/s/files/1/2497/8510/products/9155_IVORY_1_500x.jpg?v=1509207616');"></div>
</div>
<h3>Snake Mini Reversible Tote</h3>
<p>$50</p>
Shop
</div>
<div class="grid product" style="border:1px solid grey;">
<div>
<div style="background-image:url('//cdn.shopify.com/s/files/1/2497/8510/products/9155_IVORY_1_500x.jpg?v=1509207616');"></div>
</div>
<h3>Snake Mini Reversible Tote</h3>
<p>$50</p>
Shop
</div>
</div>
</section>

Answer 1

you can fix the name h3 element max-height and show dot after text is bigger then h3 using those css properties :
white-space: pre;
overflow: hidden !important;
text-overflow: ellipsis;
*, input, :before, :after {
box-sizing: border-box;
}
h2.product-header {
font-family: "Open Sans", sans-serif;
font-size: 23px;
color: #231f20;
letter-spacing: 3px;
text-align: center;
padding-bottom: 50px;
border-bottom: 2px solid #c2c1c5;
}
.row {
display: block;
font-size: 0;
}
.row .grid {
vertical-align: top;
display: inline-block;
font-size: 18px;
}
.grid.one-third {
width: 33.33%;
}
#index-new-arrivals {
font-family: "Open Sans", sans-serif;
padding: 75px 50px;
}
#index-new-arrivals .grid {
width: 33.33%;
}
#index-new-arrivals .grid.product {
margin: 75px 0 15px 0;
padding: 0 7%;
}
#index-new-arrivals .grid.product:last-child { display:none;}
#index-new-arrivals .grid.product > div {
padding-bottom: 150%;
position: relative;
}
#index-new-arrivals .grid.product > div > div {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
}
#index-new-arrivals .grid.product-name {
margin-bottom: 15px;
padding: 0 7%;
vertical-align: middle;
}
#index-new-arrivals .grid.product h3 {
font-size: 18px;
text-align: center;
margin-top: 25px;
text-transform: uppercase;
letter-spacing: 4px;
color: #231f20;
font-size: 19px;
white-space: pre;
overflow: hidden !important;
text-overflow: ellipsis;
}
#index-new-arrivals .grid.product p {
font-size: 18px;
text-align: center;
text-transform: uppercase;
letter-spacing: 4px;
color: #231f20;
font-size: 19px;
}
#index-new-arrivals .grid.product a {
font-size: 15px;
letter-spacing: 2px;
display: block;
background-color: #3e3e3f;
max-width: 230px;
width: 80%;
margin: 25px auto 100px auto;
padding: 15px 0;
text-align: center;
text-transform: uppercase;
color: #fff;
}
#media (max-width:880px) {
#index-new-arrivals .grid {
width: 50%;
}
#index-new-arrivals .grid.product:last-child { display:inline-block;}
}
<section id="index-new-arrivals">
<div class="row" style="border:1px solid blue;">
<div class="grid product" style="border:1px solid grey;">
<div>
<div style="background-image:url('//cdn.shopify.com/s/files/1/2497/8510/products/9126_BROWN_1_500x.jpg?v=1509207888');"></div>
</div>
<h3>Convertible Belt Bag</h3>
<p>$50</p>
Shop
</div>
<div class="grid product" style="border:1px solid grey;">
<div>
<div style="background-image:url('//cdn.shopify.com/s/files/1/2497/8510/products/9113_BLACK_500x.jpg?v=1509207748');"></div>
</div>
<h3>Mini Quilted Backpack</h3>
<p>$54</p>
Shop
</div>
<div class="grid product" style="border:1px solid grey;">
<div>
<div style="background-image:url('//cdn.shopify.com/s/files/1/2497/8510/products/9155_IVORY_1_500x.jpg?v=1509207616');"></div>
</div>
<h3>Snake Mini Reversible Tote</h3>
<p>$50</p>
Shop
</div>
<div class="grid product" style="border:1px solid grey;">
<div>
<div style="background-image:url('//cdn.shopify.com/s/files/1/2497/8510/products/9155_IVORY_1_500x.jpg?v=1509207616');"></div>
</div>
<h3>Snake Mini Reversible Tote</h3>
<p>$50</p>
Shop
</div>
</div>
</section>