4

I need a grid where I only specify the minimum width of the items.

Here is my attempt using flex-wrap and flex-basis: https://jsfiddle.net/2z9pgjfg/1/

HTML:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background-color: red;
  border: 1px solid black;
  flex: 1;
  flex-basis: 150px;
}

.item:after {
  content: "";
  display: block;
  padding-bottom: 75%;
}

I want any items in the last row to be the same size as all the others. Is there a way to achieve this without media queries?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
user3789953
  • 41
  • 2

1 Answers1

1

Set flex grow to 0.

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background-color: red;
  border: 1px solid black;
  flex: 0;
  flex-basis: 150px;
}

.item:after {
  content: "";
  display: block;
  padding-bottom: 75%;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
Gerard
  • 15,418
  • 5
  • 30
  • 52
  • This only works if you don't want the boxes to otherwise not have dynamic widths... I think the question is how to enable that without losing the dynamic aspect. Basis is your minimum before wrap but after wrap how do you make it not be wider than the current width of the cards that are displaying. – centerofme May 17 '23 at 17:41