需要协助 CSS 卡片网格布局

Question

我这里有这个网格：

我希望第一张大卡片占据包装纸的整个高度并保持相同的宽度，而底部的两张卡片向右移动，就像这样：

这是我的 css/html 代码，其中第 1 项是左上角较大的卡片：

.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;
    }
  }
}

Answer 1

弹性版本

我不知道你的整个结构和你的要求。但是通过只使用 flexbox 你也可以很容易地归档它。:

.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 class="cards-wrapper flex"> 
  <div class="left flex">
    <div class="big">BIG</div>
  </div>
  <div class="right flex">
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>      
  </div>
</div>

Answer 2

您可以保留网格布局并使用 grid-template-areas 使第一个项目占据整个高度，同时保留其现有宽度。

.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 class="container">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
  <div class="five">5</div>
</div>

需要协助 CSS 卡片网格布局

Need assist with CSS grid layout of cards

html

css

css-grid

弹性版本