CODEWITHSUNDEEP
csscss-grid
Rupert
Rupert

Reputation: 4347

Grid areas not being recognized

I am trying to make a wrapper that can adjust content to the left or right on a page. I am doing this using grid-template-areas. For some reason though, the first div in the right_wrapper is being assigned as the content rather than the space when I view the web site. Any hints as to what I am doing wrong?

Here my my 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";
      }
    }
  }

Here is the 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>

Upvotes: 1

Views: 102

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371909

You don't use quotation marks to define grid areas.

invalid: grid-area: "content"

valid: grid-area: content

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

From the CSS Grid spec:

§ 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).

From the CSS Values and Units spec:

§ 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.

Upvotes: 1

Related Questions