CODEWITHSUNDEEP
cssflexbox
StephD
StephD

Reputation: 304

flexbox image grid, children have large or small size, don't want any dead space

Have a gatsby/contentful portfolio. In contentful, each portfolio item has a boolean value 'featured', either true or false. If the item is featured, I want it to take up 100% width. If the item is not, I want it to be say 33% width. Problem is I don't want dead space. Intended setup below.

The items are coming in from contentful chronologically and then I'm using .map() to render them to the page. Have a little ternary saying if featured===true then add 'featured' class.

Is there a flexbox solution? Tried shrink and grow, but couldn't get that going, or maybe this is a js sorting algorithm question?

my setup

Upvotes: 1

Views: 101

Answers (1)

ksav
ksav

Reputation: 20840

You can do this with grid (and grid-auto-flow)

.container {
  display: grid;
  grid: auto-flow / 1fr 1fr 1fr;
  grid-gap: 10px;
  grid-auto-flow: dense;
}

.card {
  border: 4px solid black;
  height: 150px;
}

.featured {
  grid-column: 1 / 4;
}
<div class="container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card featured"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card featured"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

Upvotes: 1

Related Questions