布局：创建响应式 3 卡片布局

Question

我正在尝试实现一种布局，其中一张大卡片被同一列中的 2 个小卡片包围，但对于中小屏幕，将其移动为 2 列，一个包含大卡片，另一个仅包含 2 个卡片。

我不知道如何构建我的代码才能实现这一点。有人可以帮忙吗？

这是我的代码的一个片段

.container{
  display: flex;
  gap: 8px;
}
.small-card {
  width: 200px;
  height: 200px;
  background-color: red;
 }
 
 .big-card {
  height: 200px;
  flex-grow: 1;
  background-color: yellow;
  min-width: 250px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div class="container">
    <div class="small-card">Small card 1</div>
    <div class="big-card">Big Card</div>
    <div class="small-card">Small Crad 2</div>
</div>

大屏幕：

中小屏幕：

Answer 1

您应该能够通过向您的所有卡片添加一个 class（如“.card”）来完成您想要的，如下所示：

<div class="container">
    <div class="card small-card">Small card 1</div>
    <div class="card big-card">Big Card</div>
    <div class="card small-card">Small Card 2</div>
</div>

然后使用这个媒体查询：

@media screen and (max-width: 768px) {
    .container {
      flex-wrap: wrap;
    }

   .big-card {
     width: 100%;
   } 

   .container :nth-child(1){
     order: 1;
   }

   .container :nth-child(3) {
     order: 2;
   }

   .small-card {
     flex-grow: 1;
   }
}

.container{
  display: flex;
  gap: 8px;
}
.small-card {
  width: 200px;
  height: 200px;
  background-color: red;
 }
 
 .big-card {
  height: 200px;
  flex-grow: 1;
  background-color: yellow;
  min-width: 250px;
 }
 
 @media screen and (max-width: 768px) {
    .container {
      flex-wrap: wrap;
    }
   
   .big-card {
     width: 100%;
   }  
 
   .container :nth-child(1){
     order: 1;
   }
   
   .container :nth-child(3) {
     order: 2;
   }
   
   .small-card {
     flex-grow: 1;
   }
 }

<div class="container">
    <div class="card small-card">Small card 1</div>
    <div class="card big-card">Big Card</div>
    <div class="card small-card">Small Crad 2</div>
</div>

布局：创建响应式 3 卡片布局

Layout: Creating a responsive 3 card layout

css

grid

sass

flexbox

tailwind-css