时间戳

首页 > 解决方案 > 网格区域未被识别

css - 网格区域未被识别

问题描述

我正在尝试制作一个可以在页面上向左或向右调整内容的包装器。我正在使用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>

标签： csscss-grid

解决方案

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

无效的： grid-area: "content"

有效的： grid-area: content

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

来自 CSS 网格规范：

§ 3.2。作者定义的标识符：<custom-ident> 类型

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

从 CSS 值和单位规范：

§ 3. 文本数据类型

CSS 标识符，一般用 表示<ident>，由符合<ident-token>语法的字符序列组成。标识符不能被引用；否则它们将被解释为字符串。

推荐阅读