0

I'm working on my first site using CSS Grid.

I was wondering whether it is possible to use a CSS Grid Area several times in a layout.

Example:

+----------------------------------------+
|                 HEADER                 |
|----------------------------------------|
|                  NAV                   |
|----------------------------------------|
| SIDEBAR   |    CONTENT     | SIDEBAR   |
|           |                |           |
|           |                |           |
|----------------------------------------|
|                FOOTER                  |
+----------------------------------------+

My grid element has the following CSS:

.grid{
 display:grid;
 grid-area-templates: 
 "header"
 "nav"
 "sidebar"
 "content"
 "sidebar"
 "footer"  
}

Is there any way to realise this, or do I have to get around it in some other way, than using pure CSS grid?

Aryan Beezadhur
  • 4,503
  • 4
  • 21
  • 42
plac3bodk
  • 1
  • 1
  • 5
  • Yes you can apply the "grid" class to multiple elements. – Nathaniel Flick Jan 18 '18 at 09:27
  • Thanks. But when I do as in the example above, it only shows the footer. Rest of the grid-areas are placed behind. Also when checking in dev tools, it shows an error when having duplicate grid-areas in the grid-template-areas – plac3bodk Jan 18 '18 at 10:04
  • No...grid areas are specfic, unique and rectangular. It's not clear what you are trying to do. Why do you need the same grid area twice? – Paulie_D Jan 18 '18 at 11:28
  • 1
    The correct property is `grid-template-areas`... – Michael Benjamin Jan 18 '18 at 11:39
  • ... and, as noted by @Paulie_D, string values must be rectangular... https://stackoverflow.com/q/45459717/3597276 – Michael Benjamin Jan 18 '18 at 11:45
  • Okay. Thought it was clear, that I wanted to use the same content from a specific section twice on the same page, as illustrated in the example. I'd like to use the sidebar element to put in a Call to Action text and button. Hence the reason for wanting to use the same element several times in the grid – plac3bodk Jan 18 '18 at 12:21
  • 1
    You can use the same element multiple times in a grid. No problem at all. You just can't do it using the same grid area name in the `grid-template-areas` property. You'll need to use another method. Try grid's **line-based placement**: https://stackoverflow.com/q/45459717/3597276 – Michael Benjamin Jan 18 '18 at 18:15
  • 1
    Thanks alot @Michael_B – plac3bodk Jan 31 '18 at 11:59

0 Answers0