CODEWITHSUNDEEP
htmlcsscss-grid
Alexandru D. Gatea
Alexandru D. Gatea

Reputation: 21

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

I was wondering if there is any possibility to place one markup element multiple times in a page, without duplicating it. For example:

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

So let's say I'd like that banner section to be visible multiple times in a page but only write it once inside html.

Upvotes: 1

Views: 202

Answers (1)

Paulie_D
Paulie_D

Reputation: 115045

No...this is not possible.

Elements are placed once and once only.

Also, grid areas can only be placed once as a single rectangular area.

So this is invalid:

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

Upvotes: 3

Related Questions