CSS

Question

我的网格有问题。第一次做，很抱歉这个初学者的问题。

这张图（黑色边框）展示了我想要实现的效果：

不幸的是，我已经卡在第一行代码上了：

body {

  display: grid;
  grid-template-columns: 10% auto 10% 10% 10%;
  grid-template-rows: 60px auto; /*Isn't it recognizing my second row?*/
}

.temp {
  background-color: black;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Max S. Rodenkirchen - Sinn Sehen - FH AC 2022 - bei Eva Vitting</title>

    <link rel="stylesheet" type="text/css" href="style.css">

  </head>

  <body>


    <div class = "menu">

    </div>

    <div class = "temp">
      
    </div>

    <div class = "draw">
      
    </div>

    <div class = "label">
      
    </div>

    <div class = "slider">
      
    </div>

    <div class = "check">
      
    </div>
    
  </body>
</html>

温度 class 应该在第二行的左侧。

我的另一个问题可能更高级一些。正方形区域将是 P5 canvas，它始终是正方形的，并且应始终保持完整的网格行高。我想知道我是否需要编写这样的代码：

grid-template-columns: auto 60% auto auto auto;

但我很确定我在这里遗漏了一些东西。

希望得到一些帮助 :) 这将用于一个大学项目。最大值

Answer 1

你的第二行在那里，.temp div 就在那一行。只是因为 .temp div 没有内容并且第二行的高度为 auto 该行和其中的 .temp div 高度为零所以是不可见的。您可以通过添加轮廓和最小高度更容易地看到发生了什么：

body {
  display: grid;
  grid-template-columns: 10% auto 10% 10% 10%;
  grid-template-rows: 60px auto;
}

div {
  outline: 1px solid red;
  min-height: 20px;
}

.temp {
  background-color: black;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

<div class="menu">
</div>

<div class="temp">
</div>

<div class="draw">
</div>

<div class="label">
</div>

<div class="slider">
</div>

<div class="check">
</div>

Answer 2

将顶部菜单从网格中取出似乎更容易，因为它的尺寸似乎与其余元素没有直接关系。

相比之下，大正方形看起来好像是较窄列宽度的 8 倍。

可以通过给大方块aspect-ratio: 1 / 1;

使大方块的高度与其宽度相同

因此我们可以在 1fr 处定义一个单行网格，其中包含 4 列，在 8fr 处定义正方形。

为了使其更容易居中，此代码段将其放在具有弹性的容器中。

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
}

.menu {
  width: 100%;
  height: 60px;
}

.outer {
  display: flex;
  justify-content: center;
  margin-top: 1vw;
}

.container {
  width: 95%;
  display: grid;
  grid-template-columns: 1fr 8fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 1vw;
}

.menu,
.container div {
  border: 1px solid black;
  box-sizing: border-box;
}

.temp {
  grid-row: 1 / 2;
}

.draw {
  grid-column: 2 / 3;
  aspect-ratio: 1 / 1;
}

.label {
  grid-column: 3 / 4;
}

.slider {
  grid-column: 4 / 5;
}

.check {
  grid-column: 5 / 6;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Max S. Rodenkirchen - Sinn Sehen - FH AC 2022 - bei Eva Vitting</title>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>


  <div class="menu">

  </div>
  <div class="outer">
    <div class="container">
      <div class="temp">

      </div>

      <div class="draw">

      </div>

      <div class="label">

      </div>

      <div class="slider">

      </div>

      <div class="check">

      </div>
    </div>
  </div>
</body>

</html>

CSS - 无法识别网格行

CSS - Grid row not recognized

html

grid

p5.js

square