Алмазная сетка на Flexbox

Question

Мне нужна помощь, у меня есть алмазная сетка, но она не отзывчива.Моя задача - создать сетку на flexbox!на мобильных разрешениях (340px) будет два подряд.Я уже все перепробовал и не знаю, как еще это сделать :( я редактировал этот код - box-sizing: border-box

я отправляю скриншот с примером, как это должно быть введите описание изображения здесь

* {
  box-sizing: border-box
}
.container {
  width: 940px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.container .item {
  margin-top: 110px;
  -webkit-flex-basis: 240px;
      -ms-flex-preferred-size: 240px;
          flex-basis: 240px;
  height: 240px;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  background-color: #e2e4e7;
  border: 15px solid #f6f8fb;
  outline: 1px solid #e2e4e7;
  overflow: hidden;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-flex: 50vh;
  -webkit-flex-grow: 50vh;
      -ms-flex-positive: 50vh;
          flex-grow: 50vh;
}

.container .item:hover {
  background-color: #3e9eff;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.container .item:nth-child(n+4) {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  margin-top: -65px;
}

.container .item:nth-child(4) {
  margin-left: 175px;
}

.container .item:nth-child(5) {
  margin-right: 175px;
}

.sectionTwo .container .item:last-child {
  margin: 0 auto;
  margin-top: -65px;
}

<div class="container">
                <a href="#" class="item"></a>
                <a href="#" class="item"></a>
                <a href="#" class="item"></a>
                <a href="#" class="item"></a>
                <a href="#" class="item"></a>
                <a href="#" class="item"></a>
            </div>

Answer 1

Чтобы превратить ваш бриллиант в идеально отзывчивый, я удалил ваше поле и работал только со свойством transform: translateX-Y и rotate (мне кажется, это более управляемо).

Я добавил медиазапрос для преобразования его в сетку с 2-мя блоками в любой строке.(340 очень мало, чтобы увидеть, что он работает здесь, поэтому я изменил его на 640px, но вы можете написать любую ширину, которую вы хотите, также 340px: результат тот же).

Чтобы создать масштабируемый квадрат, я использовалинтересная техника, которую вы можете найти хорошо объясненной здесь (спасибо @ G-Cyr +1 за него): сетка квадратов css с flexbox .

Я пытался скопировать «алмаз»на изображении, которое вы включили в свой пост.

HTML такой же, я играл только с CSS.

Надеюсь, это поможет.

Это код:

body{
	background-color:#131313;
}

* {
  box-sizing: border-box
}

.container {
  display: flex;
  max-width:940px;
  width:60vw;
  flex-wrap: wrap;
  margin:0 auto;
}

.container .item {
   flex: 1 0 auto;
   height:auto;
   width: 50%;
   background-color: #424242;
}

.container .item:nth-child(1) {
  transform: translateY(25%) translateX(-25%) rotate(45deg);
}

.container .item:nth-child(2) {
  transform: translateY(25%) translateX(25%) rotate(45deg);
}

.container .item:nth-child(3) {
  transform: translateY(75%) translateX(-25%) rotate(45deg);
}

.container .item:nth-child(4) {
  transform: translateY(75%) translateX(25%) rotate(45deg);
}

.container .item:nth-child(5) {
  transform: translateY(125%) translateX(-25%) rotate(45deg);
}

.container .item:nth-child(6) {
  transform: translateY(125%) translateX(25%)  rotate(45deg);
}

.container .item:before {
    content:'';
    float:left;
    padding-top:100%;
}

.container .item:hover {
  background-color: #3e9eff;
  transition: all .3s ease;
}

@media (min-width: 640px){
	.container .item {
		width: 33.3333%;
	}

	.container .item:nth-child(1) {
	  transform: translateY(25%) translateX(-50%) rotate(45deg);
	}

	.container .item:nth-child(2) {
	  transform: translateY(25%) rotate(45deg);
	}

	.container .item:nth-child(3) {
	  transform: translateY(25%) translateX(50%) rotate(45deg);
	}

	.container .item:nth-child(4) {
	  transform: translateY(0%) translateX(25%) rotate(45deg);
	}

	.container .item:nth-child(5) {
	  transform:  translateY(0%) translateX(75%) rotate(45deg);
	}

	.container .item:nth-child(6) {
	  transform:  translateY(75%) translateX(-100%)  rotate(45deg);
	}
}

<div class="container">
    <a href="#" class="item"></a>
    <a href="#" class="item"></a>
    <a href="#" class="item"></a>
    <a href="#" class="item"></a>
    <a href="#" class="item"></a>
    <a href="#" class="item"></a>
</div>