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

Question

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

.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";
}

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

假设我希望该横幅部分在一个页面中多次可见，但只在 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";
}

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

Is it possible to place an HTML element in multiple CSS Grid areas?

html

css

css-grid

不...这不可能。