是否有一种直接方法可以将网格模板区域中的空网格单元（。）定位为目标？

Question

假设您有struct ItemSpecifics { let name: String let value: String } if let getItemSpecifics = item["ItemSpecifics"] as? [String:Any], let getNameValueList = getItemSpecifics["NameValueList"] as? [[String:Any]] { for nameValueList in getNameValueList { if let name = nameValueList["Name"] as? String, let value = nameValueList["Value"] as? String { let newItem = ItemSpecifics(name: name, value: value) self.itemSpecificsArray.append(newItem) } } } 像这样

grid-template-areas

是否有一种方法可以将 .grid { grid-template-areas: ". . a a a a a . ." ". . b b c c c . ." ". . b b c c c . ." } 单元格的CSS作为目标，例如使它们具有不同的背景色？

Answer 1

grid-template-areas中未命名的网格区域为CSS。因此，您在问是否有一种使用CSS定位CSS的方法。答案是否定的。 CSS用于定位HTML。 （尽管可以针对CSS伪元素进行争论）。

以下是解决该问题的三种方法：

1. 创建“空”可定位的HTML元素。

main {
  display: grid;
  grid-template-rows: 30px 30px 30px;
  grid-template-columns: repeat(9, 1fr);
  grid-gap: 5px;
  grid-template-areas: 
   "x x a a a a a y y"
   "x x b b c c c y y"
   "x x b b c c c y y";
}
   
header        { grid-area: a; background-color: lightgreen; }
article       { grid-area: b; background-color: pink; }
aside         { grid-area: c; background-color: aqua; }
.empty-area-1 { grid-area: x; background-color: gray; }
.empty-area-2 { grid-area: y; background-color: gray; }

<main>
  <div class="empty-area-1"></div>
  <header>header</header>
  <article>content</article>
  <aside>aside</aside>
  <div class="empty-area-2"></div>
</main>

1. 创建“空”可定位的CSS伪元素。

main {
  display: grid;
  grid-template-rows: 30px 30px 30px;
  grid-template-columns: repeat(9, 1fr);
  grid-gap: 5px;
  grid-template-areas: 
   "x x a a a a a y y"
   "x x b b c c c y y"
   "x x b b c c c y y";
}

main::before {
  grid-area: x;
  background-color: gray; 
  content: "";
}

main::after {
  grid-area: y;
  background-color: gray;
  content: "";
}
   
header        { grid-area: a; background-color: lightgreen; }
article       { grid-area: b; background-color: pink; }
aside         { grid-area: c; background-color: aqua; }

<main>
  <header>header</header>
  <article>content</article>
  <aside>aside</aside>
</main>

1. 如果定位仅限于背景颜色，则将颜色应用于容器：

main {
  display: grid;
  grid-template-rows: 30px 30px 30px;
  grid-template-columns: repeat(9, 1fr);
  background-color: gray;
  grid-template-areas: 
   ". . a a a a a . ."
   ". . b b c c c . ."
   ". . b b c c c . .";
}
   
header  { grid-area: a; background-color: lightgreen; }
article { grid-area: b; background-color: pink; }
aside   { grid-area: c; background-color: aqua; }      
  

<main>
  <header>header</header>
  <article>content</article>
  <aside>aside</aside>
</main>