是否可以在多个CSS网格区域中放置HTML元素？

Question

我想知道是否有可能在页面中多次放置一个标记元素，而不重复它。例如：

＆＃13;

＆＃13;

.grid {
  grid-template-areas: 
  "hero hero hero hero" 
  "menu menu menu menu" 
  "banner banner banner banner"
  "sidebar content content content" 
  "banner banner banner banner"
  "footer footer footer footer";
}

＆＃13;

<div class="grid">
  <div class="menu"></div>
  <div class="hero"></div>
  <div class="sidebar"></div>
  <div class="content"></div>
  <div class="footer"></div>
  <div class="promo-banner"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

所以，让我们说我希望该横幅部分在页面中多次可见，但只能在html中写一次。

Answer 1

不......这是不可能的。

元素只放置一次。

此外，网格区域只能作为单个矩形区域放置一次。

所以这是无效的：

.grid {
  grid-template-areas: 
  "hero hero hero hero" 
  "menu menu menu menu" 
  "banner banner banner banner" /*<== is invalid as also defined below */
  "sidebar content content content" 
  "banner banner banner banner" 
  "footer footer footer footer";
}