css - 网格区域未被识别

Question

我正在尝试制作一个可以将内容调整到页面左侧或右侧的包装器。我正在使用 grid-template-areas 执行此操作。但出于某种原因，当我查看网站时，right_wrapper 中的第一个 div 被指定为内容而不是空间。关于我做错了什么的任何提示？

这是我的 scss

.contains {

display: grid;

  & .left_wrapper {
    display:grid;
    grid-template-areas: "content space";
    grid-template-columns:  6fr 3fr;

    & .content {
      grid-area: "content";
    }

    & .space {
      grid-area: "space";
    }
  }

    & .right_wrapper {
      display:grid;
      grid-template-areas: "space content";
      grid-template-columns:  3fr 6fr;

      & .content {
        grid-area: "content";
      }

      & .space {
        grid-area: "space";
      }
    }
  }

这是HTML

<div></div>
<div class="right_wrapper">
    <div class="content">
        <h2>Right Headline</h2>
        <p>Placeholder text is useful when you need to see what a page design looks like, but the actual content
            isn't available.</p>
        <p>It's like having someone with identical measurements check the fit of a dress before trying it on
            yourself.</p>
        <p>This text is going to be replaced once the website is completed. You are currently reading text that
            is
            written in English, not any other language. We aren't quite sure what to put here yet.</p>
    </div>
    <div class="space"></div>
</div>
<div></div>

Answer 1

您不使用引号来定义网格区域。

无效: grid-area: "content"

有效: grid-area: content

Identifiers cannot be quoted; otherwise they would be interpreted as strings. (source below)

---

来自 CSS 网格规范:

§ 3.2. Author-defined Identifiers: the <custom-ident> type

Some properties accept arbitrary author-defined identifiers as a component value. This generic data type is denoted by <custom-ident>, and represents any valid CSS identifier that would not be misinterpreted as a pre-defined keyword in that property’s value definition. Such identifiers are fully case-sensitive, even in the ASCII range (e.g. example and EXAMPLE are two different, unrelated user-defined identifiers).

来自 CSS 值和单位规范:

§ 3. Textual Data Types

CSS identifiers, generically denoted by <ident>, consist of a sequence of characters conforming to the <ident-token> grammar. Identifiers cannot be quoted; otherwise they would be interpreted as strings.