html - 为什么我在 CSS Grid 中得到的是列而不是行？

Question

我有一个 html 页面，其中 1 行用于导航，1 行用于正文。我使用 css-grid 指定了两行。我已经命名了不同的网格区域

.grid-container {
  display: grid;
  grid-template-rows: [nav-row-start]40px [nav-row-end] [body-row-start] auto [body-row-end];
}

.my-border {
  border: 1px solid black;
}

.my-nav-height {
  height: 40px;
}

div {
  height: 100vh;
}

#nav {
  grid-row: nav-row-start/nav-row-end;
}

#body {
  grid-row: body-row-start/body-row-end;
}

<div class="grid-container">
  <div id="nav" class="my-border my-nav-height">nav bar</div>
  <div id="body" class="my-border my-body-height">body</div>
</div>

我看到了这个(2 列而不是两行)

但是如果我为装订线添加 0px 维度，那么我会看到两行

装订线尺寸是强制性的吗？

Answer 1

这是一个简单的语法错误。

你不能放置两个 author-defined identifiers连续地。它们需要结合起来。

这是错误的:

grid-template-rows: [nav-row-start] 40px [nav-row-end] [body-row-start] auto [body-row-end]

这是对的:

grid-template-rows: [nav-row-start] 40px [nav-row-end body-row-start] auto [body-row-end]

.grid-container {
  display: grid;
  grid-template-rows: [nav-row-start] 40px [nav-row-end body-row-start] auto [body-row-end];
}

.my-border {
  border: 1px solid black;
}

.my-nav-height {}

div {
  height: 100vh;
}

#nav {
  grid-row: nav-row-start/nav-row-end;
}

#body {
  grid-row: body-row-start/body-row-end;
}

<div class="grid-container">
  <div id="nav" class="my-border my-nav-height">nav bar</div>
  <div id="body" class="my-border my-body-height">body</div>
</div>

(使用 grid-gap 属性，我无法重现您遇到的装订线问题。)