css - 卡片容器的网格和 flex 布局

Question

我正在尝试制作


我尝试使用 display: flex 但我没有成功，我无法以相同的方式使其具有响应性和网格区域。，

代码:

const Grid = styled.div`
  display: grid;
  grid-template-columns: 40wh 1fr;
  background: red;
  & div:nth-child(1) {
    grid-area: 1 / 1 / 5 / 1;
    background: yellow;
  }
`;

export default function App() {
  return (
    <div className="App">
      <Grid>
        <div>a</div>
        <div>b</div>
        <div>b</div>
      </Grid>
    </div>
  );
}

有人可以帮助我如何使用 flex 或网格系统实现这一目标吗？

例子:

https://codesandbox.io/s/withered-river-d6twt

Answer 1

电网解决方案

有很多方法可以实现这一点。我喜欢使用 grid-template-areas定义一个明确的网格并将我的元素准确地放置在我想要的位置。从下面的代码中，特别是 grid-template-areas 的值，你可以看到 a跨越第 1 行和第 2 行。

注意:你有一个 CSS 错误:

grid-template-columns: 40wh 1fr; /* <-- wh is not a valid unit */

我将该行更改为:

grid-template-columns: 40vw 1fr 1fr;

这是完整的代码。

.grid {
    display: grid;
    grid-template-areas:
      "a b c"
      "a d e";
    grid-gap: 4px;
    grid-template-columns: 40vw 1fr 1fr;
    grid-auto-rows: 100px; 
}

.grid > * {
  background-color: #333;
  color: white;
  position: relative;
}

.a { grid-area: a; }

.b { grid-area: b; }

.c { grid-area: c; }

.d { grid-area: d; }

.e { grid-area: e; }

.grid > * > span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="grid">
  <div class="a"><span>a</span></div>
  <div class="b"><span>b</span></div>
  <div class="c"><span>c</span></div>
  <div class="d"><span>d</span></div>
  <div class="e"><span>e</span></div>  
</div>

jsFiddle

柔性解决方案

您会注意到，与 Grid 相比，以下代码中的差距有点小。使用 Grid，我们可以使用 grip-gap 来表达间隙。 ; Flex 没有给我们这样的工具。

.flex {
  display: inline-flex;
}

.left,
.right {
  flex: 1;
  display: flex;
}

.right {
  flex-wrap: wrap;
}

.right > img {
  width: 50%;
  padding-left: 4px;
}

.right > img:nth-child(1),
.right > img:nth-child(2) {
  padding-bottom: 2px;
}

.right > img:nth-child(3),
.right > img:nth-child(4) {
  padding-top: 2px;
}

img {
  max-width: 100%;
  height: auto;
}

* {
  box-sizing: border-box;
}

<div class="flex">
  <div class="left">
    <img src="http://placekitten.com/500/600" alt="">
  </div>
  <div class="right">
    <img src="http://placekitten.com/100/150" alt="">
    <img src="http://placekitten.com/100/150" alt="">
    <img src="http://placekitten.com/100/150" alt="">
    <img src="http://placekitten.com/100/150" alt="">
  </div>
</div>

jsFiddle