Question

需要帮助弄清为什么没有在以下测试页上放置项目的原因：https://codepen.io/srikat-the-vuer/pen/KLdOXN?editors=1100。

它们出现在单个列中。

func getBlockedByUsersList(handler: @escaping (Bool, [String]) -> ()){

    guard let uid = Auth.auth().currentUser?.uid else { return }

    var blockedUIDs = [String]()

    REF_USERS.child(uid).child("blocked-by-users").observeSingleEvent(of: .value, with: { (snapshot) in

        for child in snapshot.children{

            let itemSnap = child as! DataSnapshot
            blockedUIDs.append(itemSnap.key)

        }//end for

        handler(true, blockedUIDs)


    }) { (error) in
        print("error: \(error.localizedDescription)")
    }

}//end func

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

它基于本文：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>

物品未放入网格

1 个答案: