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

不能用引号引起来；否则，它们将被解释为字符串。（以下来源）

根据CSS网格规范：

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

某些属性接受任意作者定义的标识符作为   组件值。此通用数据类型由表示   <custom-ident>，代表任何有效的CSS标识符，   不会被误认为该媒体资源中的预定义关键字   值定义。此类标识符完全区分大小写，即使在   ASCII范围（例如example和EXAMPLE是两个不同的，不相关的   用户定义的标识符）。

根据CSS值和单位规范：

§ 3. Textual Data Types

CSS标识符（通常用<ident>表示）由   符合<ident-token>语法的字符序列。标识符不能被引用；否则它们将被解释为字符串。

网格区域未被识别

1 个答案: