CSS Grid-Layout: Different layouts on a website?

Get Help CSS
,
#1

Hello developers,

i have just finished the part with CSS Grids and are practicing a bit with it. I just wonder: How is it possible to have different layouts within the same website, without coding everysingle page?

For example:
I just coded an index.html with some predefined sections:

  • Logo Bar
  • Nav
  • Header stage
  • Section (Introduction)
  • Section (some boxes)
  • Section with a picture an text
  • Footer

Now i want to create a child-page, called products i.e., how can i use my existing grid, with the same sections, but in a different order?

Like this:

  • Logo Bar
  • Nav
  • Header stage
  • Section (some boxes)
  • Section with a picture an text
  • Footer

Does anyone have an idea?

#2

I don’t know how to do it with CSS grids, but utility as you need is in Vue.js. There are reusable components which you can reuse on pages.