卡片容器的网格和弹性布局

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或grid系统实现这一目标吗？

示例：

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

Answer 1

网格解决方案

有很多方法可以完成此任务。我喜欢使用public class TeamMember implements Comparable<TeamMember> { String fullName; String idString; public TeamMember(String name, String id) { name = name.toUpperCase(); idString = id; boolean findspace = false; for (int i = 0; i < name.length(); i++) { if (name.charAt(i) == ' ') { findspace = true; break; } } if (findspace) { String string1 = name.substring(0, 1) + name.substring(1, findSpace(name)).toLowerCase(); String string2 = name.substring(findSpace(name) + 1, findSpace(name) + 2) + name.substring(findSpace(name) + 2).toLowerCase(); fullName = string1 + " " + string2; } else { fullName = name.charAt(0) + name.substring(1).toLowerCase(); } } private int findSpace(String name) { for (int j = 0; j < name.length(); j++) { if (name.charAt(j) == ' ') { return j; } } return 0; } public String toString() { return fullName; } @Override public int compareTo(TeamMember other) { return this.idString.compareTo(other.idString); } } 定义一个明确的网格并将我的项目准确放置在我想要的位置。在下面的代码中，特别是[{ "Date": "2020-01-24 07:35:46", "sensorName": "sensor 1", "sensorValue": 213 }, { "Date": "2020-01-24 07:35:46", "sensorName": "sensor 1", "sensorValue": 433 }, { "Date": "2020-02-10 06:03:36", "sensorName": "sensor 1", "sensorValue": 321 }, { "Date": "2020-02-10 06:03:36", "sensorName": "sensor 1", "sensorValue": 43 }, { "Date": "2020-02-12 03:30:57", "sensorName": "sensor 1", "sensorValue": 4321 }] 的值，您可以看到<script> var sensor1 = <?php echo json_encode($json_sensor1, JSON_NUMERIC_CHECK); ?>; var sensor2 = <?php echo json_encode($json_sensor2, JSON_NUMERIC_CHECK); ?>; var yValue1 = sensor1.sensorValue; var yValue2 = sensor2.sensorValue; var xValue = sensor1.Date; </script> 跨越了第1行和第2行。

注意：您遇到CSS错误：

grid-template-areas

我将该行更改为：

grid-template-areas

这是完整的代码。

a

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

jsFiddle

---

Flex解​​决方案

您会注意到，与Grid相比，以下代码中的空白有些破绽。使用Grid，我们可以使用grid-template-columns: 40vw 1fr 1fr; 来表达差距。 Flex没有提供此类工具。

.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