如何用CSS让列表首个卡片尺寸为其他卡片的3倍？

我通过map函数渲染卡片列表，CSS中设置了flex-wrap: wrap，现在想把首个卡片设置为其他卡片的3倍尺寸，请问可用哪些CSS属性解决该问题，是否需要修改HTML或单独创建组件？

附当前代码：

JSX代码 #

<div className={styles.second_part}>
    {
        news.filter(cat => cat.category === "Category").slice(0,8).map((i)=>(
            <div className={styles.normal_card}>
                <div className={styles.normal_card_img}>
                    <Link href={'/news/'+i._id}>
                        <img src={i?.image} alt=""/>
                    </Link>
                </div>
                <div className={styles.normal_card_desc}>
                    <Link href={'/news/'+i._id}>
                        <h2>{i.title}</h2>
                        <span>{i.description?.length > 150 ? `${i.description?.substring(0, 150)}...` : i.description}</span>
                    </Link>
                </div>
            </div>
        ))
    }
</div>

CSS代码 #

.second_part{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .normal_card {

    width: 24%;
    justify-content: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #EDEDED;

    .normal_card_img {
      img {
        width: 100%;
        object-fit: cover;
        height: 300px;
      }
    }

    .normal_card_desc {
      text-align: justify;
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;

      h2 {
        font-size: 16px;
        margin-bottom: 15px;

        &:hover {
          color: #ff4f00;
        }
      }

      span {
        margin-top: 15px;
      }
    }

    hr {

    }
  }
}

不需要单独创建组件，也不用大幅修改HTML结构，只需要给第一个卡片添加特殊样式类，配合CSS调整尺寸即可：

1. 修改JSX渲染逻辑 #

利用map函数的index参数，给第一个元素（index=0）额外添加一个类名，比如first_card：

<div className={styles.second_part}>
    {
        news.filter(cat => cat.category === "Category").slice(0,8).map((i, index)=>(
            <div className={`${styles.normal_card} ${index === 0 ? styles.first_card : ''}`}>
                <div className={styles.normal_card_img}>
                    <Link href={'/news/'+i._id}>
                        <img src={i?.image} alt=""/>
                    </Link>
                </div>
                <div className={styles.normal_card_desc}>
                    <Link href={'/news/'+i._id}>
                        <h2>{i.title}</h2>
                        <span>{i.description?.length > 150 ? `${i.description?.substring(0, 150)}...` : i.description}</span>
                    </Link>
                </div>
            </div>
        ))
    }
</div>

2. 调整CSS样式 #

在原有CSS基础上，添加first_card的样式，调整宽度和内部元素的尺寸：

.second_part{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .normal_card {

    width: 24%;
    justify-content: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #EDEDED;

    .normal_card_img {
      img {
        width: 100%;
        object-fit: cover;
        height: 300px;
      }
    }

    .normal_card_desc {
      text-align: justify;
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;

      h2 {
        font-size: 16px;
        margin-bottom: 15px;

        &:hover {
          color: #ff4f00;
        }
      }

      span {
        margin-top: 15px;
      }
    }
  }
  /* 新增第一个卡片的样式 */
  .first_card {
    width: 74%; /* 适配space-between布局，和三个普通卡片的宽度+间距匹配 */
    .normal_card_img img {
      height: 400px; /* 可选：调整图片高度让大卡片更协调 */
    }
    .normal_card_desc h2 {
      font-size: 20px; /* 可选：放大标题字号突出显示 */
    }
  }
}

关键说明 #

• 核心用width属性直接调整尺寸：普通卡片占24%，第一个卡片占74%，配合flex-wrap: wrap和justify-content: space-between刚好实现一行大卡片+三个小卡片，后续小卡片自动换行的布局。
• 也可以用flex-grow替代固定宽度：给第一个卡片设flex-grow:3，普通卡片设flex-grow:1，同时去掉固定width，这种方式更灵活，但需要注意容器宽度的分配逻辑。
• 全程不需要单独创建组件，仅通过索引判断添加类名的方式实现差异化样式，代码改动极小。

内容的提问来源于stack exchange，提问作者user15018248