How to make a 7 item diamond grid with CSS grid?-CodePudding

How can I replicate the followig using CSS Grid?

So far I have the following:

.parent{
   display: grid;
   gap: 1.5em;
   grid-template-columns: repeat(3, 1fr);
}

But this leaves the first column with 3 items (not desired)...

Also, how could one align-items: center; the first and last column to give that diamond effect?

CodePudding user response：

First you need to set class/id for every box you want to have, then just set start and end values for both columns and rows for every box.

The trick I used, to get desired output, is that I didnt go for 3 rows, but 6. While middle column has taken all the rows, left and right columns have first and last row empty.

Example in codepen: https://codepen.io/FITDaniel/pen/abVawrw

.box{
  background: #123456;
  margin: 15px;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 50px);
}
.box1 {
   grid-column-start: 1;
   grid-column-end: 2;
   grid-row-start: 2;
   grid-row-end: 4;
}
.box2 {
   grid-column-start: 1;
   grid-column-end: 2;
   grid-row-start: 4;
   grid-row-end: 6;
}
.box3 {
   grid-column-start: 2;
   grid-column-end: 3;
   grid-row-start: 1;
   grid-row-end: 3;
}
.box4 {
   grid-column-start: 2;
   grid-column-end: 3;
   grid-row-start: 3;
   grid-row-end: 5;
}
.box5 {
   grid-column-start: 2;
   grid-column-end: 3;
   grid-row-start: 5;
   grid-row-end: 7;
}
.box6 {
   grid-column-start: 3;
   grid-column-end: 4;
   grid-row-start: 2;
   grid-row-end: 4;
}
.box7 {
   grid-column-start: 3;
   grid-column-end: 4;
   grid-row-start: 4;
   grid-row-end: 6;
}

<div >
   <div ></div>
   <div ></div>
   <div ></div>
   <div ></div>
   <div ></div>
   <div ></div>
   <div ></div>
</div>