如何保持规律？

Question

如何在更改分辨率的同时保留画廊元素的样式？我的意思是最后一行的最后一个元素成为新行的第一个元素。检查我的笔，看看我在找什么。 这是codePen。 https://codepen.io/ocebeki/pen/xyWNxo

我希望你明白我的意思。

.gallery {
  height: 100%;
  width: 100%;
}

enter code here .gallery__gallery {}

.gallery__box {
  width: 100px;
  height: 100px;
  margin: 10px;
  position: relative;
}


/* .gallery__box:nth-child(even) {
          align-self: flex-end;
        } */

.gallery__item {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: green;
}

.gallery__row-1 {
  display: flex;
  justify-content: center;
  height: 100px;
  flex-wrap: wrap;
}

.gallery__row-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 100px;
}

<div class="gallery__wrapper">
  <div class="gallery__gallery">
    <div class="gallery__row-1">
      <div class="gallery__box">
        <div class="gallery__item"></div>
      </div>
      <div class="gallery__box">
        <div class="gallery__item"></div>
      </div>
      <div class="gallery__row-2">
        <div class="gallery__box">
          <div class="gallery__item"></div>
        </div>
        <div class="gallery__box">
          <div class="gallery__item"></div>
        </div>
        <div class="gallery__box">
          <div class="gallery__item"></div>
        </div>
      </div>
    </div>
  </div>