Cardview 布局未以正确的设计模式显示答案

【问题标题】：Cardview layout not displaying in the right design patternCardview 布局未以正确的设计模式显示
【发布时间】：2021-10-29 18:15:50
【问题描述】：

目前我有一个容器，可以将我的第一张和第六张卡片水平拉长，而卡片 2 到 5 垂直拉长。我目前正在使用引导程序来实现这一点，但布局并不是我想要的。

这是我想要的样子：

这是它目前的样子：

我需要有关如何在行中使用较低高度的 1 张卡和在第二行中的初始 2 张卡来接管由于第一张卡具有较低高度而留下的空白的帮助。

代码沙盒：https://codesandbox.io/s/naughty-fermat-z5ibx?file=/src/App.tsx

代码：

<div className="container">
        <div className="row">
          <div className="col-lg-12">
            <div className="row">
              {posts &&
                posts.map((item, idx) => (
                  <div
                    className={
                      idx === 0 || idx % 5 === 0
                        ? "col-md-6 col-sm-6"
                        : "col-md-3 col-sm-3"
                    }
                    style={{
                      cursor: "pointer",
                      paddingLeft: "5px",
                      paddingRight: "5px"
                    }}
                  >
                    <img
                      src={item.img}
                      alt=""
                      style={{
                        minHeight: "280px",
                        objectFit: "cover",
                        height: "100%",
                        width: "100%",
                        paddingBottom: "10px"
                      }}
                    />
                    <div className="topLeft">{item.Title}</div>
                  </div>
                ))}
            </div>
          </div>
        </div>
      </div>

【问题讨论】：

标签： html css reactjs twitter-bootstrap frontend

【解决方案1】：

首先，您应该利用实际的bootstrap 4 card。其次，您可以采取多种方式。

#1。只使用两列，然后使用项目的高度和弹性顺序：

https://jsfiddle.net/n31v7yr6/

演示：

.card-group2 {
  height: 300px;
}

<link href="https://getbootstrap.com/docs/4.6/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="card-group2 col-sm d-flex flex-wrap bg-primary align-content-center">
      <div class="card w-100 h-50">1</div>
      
      <div class="card w-50 h-25">2</div>
      <div class="card w-50 h-25">3</div>
    </div>
     <div class="card-group2 col-sm d-flex flex-row-reverse flex-wrap bg-primary align-content-center">
      <div class="card w-100 h-50 order-1">1</div>
      
      <div class="card w-50 h-25">2</div>
      <div class="card w-50 h-25">3</div>
    </div>
  </div>
</div>

#2。两列使用css网格，flexbox的代码与上面类似。

#3。根本不要使用row > col，只需使用引导程序card-group。

#4。如果您不想更改 html（从后端生成？），那么只需使用单个项目的高度'并使用相对位置来更改垂直位置。

【讨论】：