css - 元素没有被放置在网格中

Question

需要帮助来弄清楚为什么元素没有被放置在这个测试页的网格中:https://codepen.io/srikat-the-vuer/pen/KLdOXN?editors=1100 .

它们出现在一个列中。

@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>

它基于这篇文章:https://css-tricks.com/simple-named-grid-areas/ .

有什么想法吗？

Answer 1

将网格区域的“名称”从数字更改为字符串可以修复它。

@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>