Need assist with CSS grid layout of cards-CodePudding

I have this grid over here:

and i want the first big card to take the whole height of the wrapper and remain the same width, while the bottom two cards go to the right, somehow like this:

here's my css/html code where item-1 is the bigger card on the top-left:

.cards-wrapper {
  background-color: #43cbff;
  width: 1240px;
  height: 380px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 20px;
  @media (min-width: 30em) {
    grid-template-columns: 1fr 1fr;
  }
  @media (min-width: 60em) {
    grid-template-columns: repeat(4, 1fr);
  }
}
.cards {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  position: relative;
  top: 0;
  background-color: aquamarine;
  border: 1px solid lightgrey;
  border-radius: 8px;
}
.item-1 {
  @media (min-width: 60em) {
    grid-column: 1 / span 2;

    h1 {
      font-size: 24px;
    }
  }
}

CodePudding user response：

You can keep the grid layout and use grid-template-areas to make that first item take up the full height whilst retaining its existing width.

.container {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 8px 8px;
  grid-auto-flow: row;
  grid-template-areas:
    "one one two three"
    "one one four five";
}

.container * {
  background: orange;
}

.one { grid-area: one; }
.two { grid-area: two; }
.three { grid-area: three; }
.four { grid-area: four; }
.five { grid-area: five; }

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
</div>

CodePudding user response：

Flex version

I dont know you entire structure and your requirement. But by using only flexbox you can archive this also quite easy.:

.cards-wrapper {
  background: gray;
}
.flex {
  display: flex;
  gap:5px;
}

.left, .right {
  width: 50%;
}
.right {
  flex-wrap: wrap;
  justify-content: center;
}
.right > div {
  width: 49,2%;
  background-color: lightgreen;
  height:100px;
}

.big {
  background-color: green;
  width: 100%;
}

<div > 
  <div >
    <div >BIG</div>
  </div>
  <div >
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>      
  </div>
</div>