Flexbox grid with multi-width columns - html

Question

I have a 4 column flexbox grid that is used to display products. All products have a width of 25% but how can I ensure the grid doesn't break if just 1 product gets a width of 75% for example so that I can display 2 products on one row?
Is there a way, using flexbox, to give the wider 75% grid item priority so that it automatically adjusts/shifts the grid to ensure it doesn't break like it does at the moment?
jsFiddle (Code at the bottom)
https://jsfiddle.net/kdjkc15g/
This is what I'm trying to achieve:
CSS
.grid-uniform {
display: -ms-flex;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
margin-left: -20px;
}
.grid__item {
width: 25%;
display: -ms-flex;
display: -webkit-flex;
display: flex;
padding-left: 20px;
position: relative;
margin-bottom: $gutter*2;
}
.grid__item.featured-product {
width: 75%;
}
HTML
<div class="flex-grid">
<div class="grid-uniform">
<a href="#" class="product grid__item">
<div class="flex-content">
<div class="grid__image">
<img src="http://via.placeholder.com/250x350">
</div>
<div class="grid product-info">
<p>
This is a title
</p>
</div>
</div>
</a>
...
</div>
</div>

Answer 1

Edit your CSS to this. It's fully responsive now.
The CSS
* {box-sizing: border-box;}
.flex-grid {
overflow: hidden;
padding: 0;
}
.grid-uniform {
display: flex; display: -webkit-flex;
flex-wrap:wrap; -webkit-flex-wrap: wrap;
}
.grid__item {
flex-grow: 1; -webkit-flex-grow: 1;
flex-basis: 25%;
}
.grid__item.featured-product {
flex-basis: 50%;
}
.grid__image {
background:#f4f4f4;
padding-top:$gutter;
padding-bottom:$gutter;
overflow: hidden;
}
Link to fiddle

Answer 2

A rather easy way to do that type of layout is through CSS Grid module. But since you've asked it for Flexbox; here is my take:
The flexbox-based grid here is required to be adjusted on width (not exactly the width property, but flex-basis). Using flex-basis makes it more easier to size up the flexbox-children, therefore I avoided giving them a width.
The adjustment I made below is with calc(), substracting the (n-1) times of the gutter width from each .grid__item.
Why (n-1) times?
We've been giving a left margin to each of the .grid__item and want it not to collapse. So, we discount the last cell in a row.
/* Box-sizing reset */
*,
*:before,
*:after {
box-sizing: border-box;
}
.flex-grid {
max-width: 1120px;
margin: 2em auto;
}
.grid-uniform {
display: flex;
flex-wrap: wrap;
margin-left: -20px;
}
.grid__item {
display: flex;
/* Used `flex` instead of `width` */
flex: 1 0 calc(25% - 60px); /* (4-1) * 20px = 60px
/* Used `margin` instead of `padding` */
margin: 0 0 20px 20px;
position: relative;
/* Gave it a size in order to make it look "uniform" */
max-height: 350px;
}
.grid__item.featured-product {
flex-basis: calc(75% - 60px); /* (4-1) * 20px = 60px */
}
.flex-content {
/* Made the content take up the whole available width and hide bleed-outs, if any */
width: 100%;
overflow: hidden;
}
.grid__image img {
/* Made the dummy images look okay */
width: 100%;
object-fit: cover;
object-position: center;
}
<div class="flex-grid">
<div class="grid-uniform">
<a href="#" class="product grid__item">
<div class="flex-content">
<div class="grid__image">
<img src="http://via.placeholder.com/250x350">
</div>
<div class="grid product-info">
<p>
This is a title
</p>
</div>
</div>
</a>
<a href="#" class="product grid__item">
<div class="flex-content">
<div class="grid__image">
<img src="http://via.placeholder.com/250x350">
</div>
<div class="grid product-info">
<p>
This is a title
</p>
</div>
</div>
</a>
<a href="#" class="product grid__item">
<div class="flex-content">
<div class="grid__image">
<img src="http://via.placeholder.com/250x350">
</div>
<div class="grid product-info">
<p>
This is a title
</p>
</div>
</div>
</a>
<a href="#" class="product grid__item">
<div class="flex-content">
<div class="grid__image">
<img src="http://via.placeholder.com/250x350">
</div>
<div class="grid product-info">
<p>
This is a title
</p>
</div>
</div>
</a>
<a href="#" class="product grid__item">
<div class="flex-content">
<div class="grid__image">
<img src="http://via.placeholder.com/250x350">
</div>
<div class="grid product-info">
<p>
This is a title
</p>
</div>
</div>
</a>
<a href="#" class="product grid__item featured-product">
<div class="flex-content">
<div class="grid__image">
<img src="http://via.placeholder.com/550x350">
</div>
<div class="grid product-info">
<p>
This is a title
</p>
</div>
</div>
</a>
<a href="#" class="product grid__item">
<div class="flex-content">
<div class="grid__image">
<img src="http://via.placeholder.com/250x350">
</div>
<div class="grid product-info">
<p>
This is a title
</p>
</div>
</div>
</a>
<a href="#" class="product grid__item">
<div class="flex-content">
<div class="grid__image">
<img src="http://via.placeholder.com/250x350">
</div>
<div class="grid product-info">
<p>
This is a title
</p>
</div>
</div>
</a>
</div>
</div>
I hope it was helpful. Cheers!