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为排水沟添加尺寸，那么我会看到两行

天沟尺寸是强制性的吗？

标签： htmlcsscss-grid

Answer 1

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

您不能连续放置两个作者定义的标识符。它们需要结合起来。

这是错误的：

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属性，我无法重现您遇到的装订线问题。）