Question

尽管我在两个网格中挣扎，但我仍在尝试构建一个响应速度更好的页面。

当页面垂直扩展时，我需要声明不同食物的图块进行扩展，而底部的绿色图块要留在底部，到目前为止，它们一直跳到页面的顶部，我不知道为什么。

下图显示了我遇到的问题。

下面的代码显示了CSS页面的介绍

*{
    box-sizing: border-box;
}
html, body {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;

  }
body {
  display: grid;
  grid-template-rows: 100px [nav-start] auto 125px [nav-end];
  grid-template-columns:  [header-start] minmax(200px, 2fr) 10fr [header-end];
  grid-template-areas: "header  header"
                      "nav    content"
                      "nav    footer";
  }

header {
  grid-column: header-start / header-end;
  background-color: navy;
}
nav {
  grid-row: nav-start / nav-end;
  background-color: slategrey;
}

content {
    background-color: white;
}


footer {
    background-color: #726a6a;
}
.container {
  height: 10%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 5px 5px;
  padding: 5px;

}
.cell {
  color: white;
  font-size: 1.5rem;
  text-align: center;
  padding: 1rem;
    line-height: 25px;
.cell-1 {
  background: brown;
}
.cell-2 {
  background: brown;
}
.cell-3 {
  background: brown;
}
.cell-4 {
  background: black;
}
.cell-5 {
  background: black;
}
.cell-6 {
  background: black;
}
.cell-7 {
  background: orange;
}
.cell-8 {
  background: orange;
}
.cell-9 {
  background: orange;
}
.cell-10 {
  background: maroon;
}
.cell-11 {
  background: maroon;
}
.cell-12 {
  background: maroon;
}
.cell-13 {
  background: lightblue;
}
.cell-14 {
  background: lightblue;
}
.cell-15 {
  background: lightblue;
}
.cell-16 {
  background: tan;
}
.cell-17 {
  background: tan;
}
.cell-18 {
  background: tan;
}
.cell-19 {
  background: green;
}
.cell-20 {
  background: green;
}
.cell-21 {
  background: green;
}
.cell-22 {
  background: gold;
}
.cell-23 {
  background: gold;
}
.cell-24 {
  background: gold;
}
.cell-25 {
  background: coral;
}
.cell-26 {
  background: coral;
}
.cell-27 {
  background: coral;

}
.cell-28 {
  background: maroon;
}
.cell-29 {
  background: maroon;
}
.cell-30 {
  background: maroon;
}
.cell-31 {
  background: blueviolet;
}
.cell-32 {
  background: blueviolet;
}
.cell-33 {
  background: blueviolet;
}
.cell-34 {
  background: navy;
}
.cell-35 {
  background: navy;
}
.cell-36 {
  background: darkgreen;
}

代码的下一部分显示调味品/添加物（生菜，西红柿，洋葱等）。这是跳到顶部附近的部分。

.container2 {
  height: 10%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 5px 4px;
  padding: 5px;

}
.cellb {
  color: white;
  font-size: 1.5rem;
  text-align: center;
  padding: .5rem;

    }
.cell-1a {
  background: teal;
}
.cell-2a {
  background: teal;
}
.cell-3a {
  background: teal;
}
.cell-4a {
  background: teal;
}
.cell-5a {
  background: teal;
}
.cell-6a {
  background: teal;
}
.cell-7a {
  background: teal;
}
.cell-8a {
  background: teal;
}
.cell-9a {
  background: teal;
}
.cell-10a {
    background: teal;
}

我是在正确的轨道上思考我需要使用grid-template-rows维度还是其他东西吗？

网格将不会扩展以填充空白

0 个答案: