Layout grid items in css-CodePudding

I just want to know what's the best way to layout the items so that I could have the same result shown in the attachment or what's the trick behind that.

CodePudding user response：

you can inspire from below code:

.container {
  display: flex;
  align-items: center;
  gap:8px;
}

.container .item {
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.inner-item {
  width:60px;
  height:60px;
  background-color:red;
}

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

CodePudding user response：

I find CSS Grid to be the most intuitive for this type of x/y directional layout. Using grid-template-areas is a fun way to approach layout since you can essentially create any layout you'd like and then assign classes to the arbitrary names you've used for your grid areas. The dots (.) mean that the grid area is empty.

Although this is totally possible to accomplish using flex, the additional markup needed is undesirable. I would argue that any layout requiring control over both x and y directions is more intuitive and scalable using grid.

.grid {
  display: inline-grid;
  gap: 0.75rem;
  grid-template-areas:
                       ". item2"
                       ". item2"
                       "item1 item2"
                       "item1 item2"
                       "item1 item3"
                       "item1 item3"
                       ". item3"                       
                       ". item3";                       
}

.item {
  background-color: green;
  color: ghostwhite;
  width: 100px;
  height: 100px;
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

<div >
  <div >item 1</div>
  <div >item 2</div>
  <div >item 3</div>  
</div>

jsFiddle