1

I have a grid layout of 8 divs. I am trying to increase the height of the 5th div and decrease the height of the 8th div. Every way I have tried I get a big gap. I haven't used masonry isotope before and need to reorder the divs for mobile so thought to use flexbox. I would really appreciate some help and pointing to some good tutorials when needing to use different heights in a grid layout. Is flexbox the best way to do this

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: start;
  align-items: baseline;
  align-content: start;
  width: 1058px;
}

.item {
  flex: 1 1 auto;
  margin: 3px;
  border: 1px solid red;
}
<body>
  <div class="container">
    <div class="item">
      <img src="https://via.placeholder.com/635x300.png">
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/267x300.png">
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/267x300.png">
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/267x300.png">
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/267x300.png">
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/267x300.png">
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/267x300.png">
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/267x300.png">
    </div>
  </div>
</body>

?

user3515765
  • 317
  • 2
  • 17
  • 1
    A flex solution may be hacky, this is a really good case for using CSS Grid. – disinfor Dec 17 '19 at 22:03
  • Thanks I did come across CSS Grid but wasn't sure if I could re-order the divs in mobile? – user3515765 Dec 17 '19 at 22:27
  • 2
    You sure can. Just set the `grid-area` for elements differently in your media queries. – disinfor Dec 17 '19 at 22:29
  • 1
    Perfect thank you so much. Someone has seen my question and closed it as it is more or less the same thing I was asking. For anyone else a good explanation not to use Flexbox for this kind of thing: https://stackoverflow.com/questions/34480760/is-it-possible-for-flex-items-to-align-tightly-to-the-items-above-them – user3515765 Dec 17 '19 at 22:34

0 Answers0