我的网格布局为8格。我正在尝试增加第5格的高度，并减少第8格的高度。我尝试过的每一种方法都会产生很大的差距。我以前没有使用过砌体同位素，因此需要为移动设备重新划分div的顺序，因此被认为可以使用flexbox。当需要在网格布局中使用不同的高度时，我将非常感谢您的帮助和指向一些不错的教程。 flexbox是执行此操作的最佳方法吗？
.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>
？