Items not getting placed in the grid

Question

Need help with figuring out why items are not getting placed in the grid on this test page: https://codepen.io/srikat-the-vuer/pen/KLdOXN?editors=1100.

They are appearing in a single column.

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: repeat(7, 1fr);
  grid-template-areas:
    "1 1 1 1 4 4 4"
    "2 2 3 3 4 4 4"
    "2 2 3 3 4 4 4";
  
  max-width: 1000px;
  margin: 0 auto;
}
.pro-features {
  grid-area: 1;
}

.feature-privacy {
  grid-area: 2;
}

.feature-collab {
  grid-area: 3;
}

.feature-assets {
  grid-area: 4;
}

a {
  text-decoration-color: orange;
  text-decoration-style: double; 
  text-decoration-skip: none;
  color: inherit;
  font-weight: bold;
  
  display: inline-block;
}

.grid > div {
  background: #444;
  color: white;
  border-radius: 1rem;
  padding: 1rem;
  border-top: 1px solid #666;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
}

h1, h2 {
  margin: 0;
  line-height: 1;
}
body {
  background: #222;
  margin: 0;
  padding: 1rem;
  line-height: 1.3;
  font-family: Roboto, sans-serif;
}

<div class="grid">
  <div class="pro-features">
    <h1>CodePen PRO Features</h1>
    <p>CodePen has many PRO features including these four!</p>
  </div>
  <div class="feature-privacy">
    <h2>Privacy</h2>
    <p>You can make as many <a href="https://codepen.io/pro/privacy/">Private</a> Pens, Private Posts, and Private Collections as you wish! Private <a href="https://codepen.io/pro/projects">Projects</a> are only limited by how many total Projects your plan has.</p>
  </div>
  <div class="feature-collab">
    <h2>Collab Mode</h2>
    <p><a href="https://blog.codepen.io/documentation/pro-features/collab-mode/">Collab Mode</a> allows more than one person to edit a Pen <em>at the same time</em>.</p>
  </div>
  <div class="feature-assets">
    <h2>Asset Hosting</h2>
    <p>You'll be able to <a href="https://blog.codepen.io/documentation/pro-features/asset-hosting/">upload files</a> directly to CodePen to use in anything  you build. Drag and drop to the Asset Manager and you'll get a URL to use. Edit your text assets at any time.</p>
  </div>
  
</div>

It is based on this article: https://css-tricks.com/simple-named-grid-areas/.

Any ideas?

see https://stackoverflow.com/questions/21227702 and updated codepen: https://codepen.io/anon/pen/NVxKww — kukkuz, May 09 '19 at 04:03

score 1 · Answer 1 · answered May 09 '19 at 03:31

Changing the "names" of the grid areas from numbers to strings fixed it.

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: repeat(7, 1fr);
  grid-template-areas:
    "p1 p1 p1 p1 p4 p4 p4"
    "p2 p2 p3 p3 p4 p4 p4"
    "p2 p2 p3 p3 p4 p4 p4";
  
  max-width: 1000px;
  margin: 0 auto;
}
.pro-features {
  grid-area: p1;
}

.feature-privacy {
  grid-area: p2;
}

.feature-collab {
  grid-area: p3;
}

.feature-assets {
  grid-area: p4;
}

a {
  text-decoration-color: orange;
  text-decoration-style: double; 
  text-decoration-skip: none;
  color: inherit;
  font-weight: bold;
  
  display: inline-block;
}

.grid > div {
  background: #444;
  color: white;
  border-radius: 1rem;
  padding: 1rem;
  border-top: 1px solid #666;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
}

h1, h2 {
  margin: 0;
  line-height: 1;
}
body {
  background: #222;
  margin: 0;
  padding: 1rem;
  line-height: 1.3;
  font-family: Roboto, sans-serif;
}

<div class="grid">
  <div class="pro-features">
    <h1>CodePen PRO Features</h1>
    <p>CodePen has many PRO features including these four!</p>
  </div>
  <div class="feature-privacy">
    <h2>Privacy</h2>
    <p>You can make as many <a href="https://codepen.io/pro/privacy/">Private</a> Pens, Private Posts, and Private Collections as you wish! Private <a href="https://codepen.io/pro/projects">Projects</a> are only limited by how many total Projects your plan has.</p>
  </div>
  <div class="feature-collab">
    <h2>Collab Mode</h2>
    <p><a href="https://blog.codepen.io/documentation/pro-features/collab-mode/">Collab Mode</a> allows more than one person to edit a Pen <em>at the same time</em>.</p>
  </div>
  <div class="feature-assets">
    <h2>Asset Hosting</h2>
    <p>You'll be able to <a href="https://blog.codepen.io/documentation/pro-features/asset-hosting/">upload files</a> directly to CodePen to use in anything  you build. Drag and drop to the Asset Manager and you'll get a URL to use. Edit your text assets at any time.</p>
  </div>
  
</div>

For reference: "The `grid-area` property can also be set to a `` which acts as a name for the area, which can then be placed using `grid-template-areas`" ([grid-area](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)). And "the first character must not be a decimal digit, nor a hyphen (-) followed by a decimal digit or another hyphen" ([custom-ident#Forbidden_values](https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident#Forbidden_values)). — showdev, May 09 '19 at 09:47

Items not getting placed in the grid

1 Answers1