Diamond grid on Flexbox

Question

I need a help i have a diamond grid, but it not responsive. my task is a making it grid on flexbox! on the mobile resolutions (340px), it will be two on the row. I have already tried everything and do not know how more make it:( i edited this code - box-sizing: border-box

i send screenshot with an example how should it beenter image description here

* {
  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>

of course, it is have in my code but it doesn't make it responsive — H4nteR, Oct 20 '18 at 21:24
What do you mean it's "not responsive"? How would you like to make it responsive? — pretzelhammer, Oct 20 '18 at 23:21
when resolution display will be 340px, this is diamonds must be two block on the row — H4nteR, Oct 21 '18 at 08:21

ReSedano · Accepted Answer · 2018-10-22T20:56:51.423

To transform your diamond in a perfect responsive one, I removed your margin and I worked only with transform property: translateX-Y and rotate (it is more controllable, I think).

I added a media query to transform it in a grid with 2 blocks in any row. (340 is very small to see it works here, so I changed it to 640px, but you can write every width you want, also 340px: result is the same).

To create a scalable square, I used an interesting technique that you can find well explained here (thanks to @G-Cyr +1 for him): css grid of squares with flexbox.

I tried to copy the "diamond" in the image that you included in your post.

HTML is the same, I played only with CSS.

Hope it helps.

This is the code:

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>

Thanks! this is just what i need! – H4nteR Oct 23 '18 at 21:09 — H4nteR, Oct 23 '18 at 21:09

Diamond grid on Flexbox

1 Answers1