CODEWITHSUNDEEP
css
john denver
john denver

Reputation: 47

css grids change layout depending on page

so i have my main page that have a menu , sidebar and main window. I have a redirect to another page. On this page i would like the sidebar to go away.

Is this possible using CSS grids without having 2 CSS files?

so for example this would be the grids for index.html

grid-container {
  display: grid;
  grid-template-areas:
  'menu menu menu menu'
  'mainWindow mainWindow mainWindow chat'
  'footer footer footer footer';
  grid-gap: 0.6em;
  column-gap: 1.2em;
}

on redirect to myOtherPage.html

.grid-container {
  display: grid;
  grid-template-areas:
  'menu menu menu menu '
  'mainWindow mainWindow mainWindow mainWindow '
  'footer footer footer footer';
   grid-gap: 0.6em;
   column-gap: 1.2em;
}

Upvotes: 1

Views: 636

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19109

You could structure your CSS as such. The first block has the styles all .grid-containers share. The next is unique to whatever other-page should be.

.grid-container {
  display: grid;
  grid-template-areas:
  'menu menu menu menu'
  'mainWindow mainWindow mainWindow chat'
  'footer footer footer footer';
  grid-gap: 0.6em;
  column-gap: 1.2em;
}

.grid-container.other-page {
  grid-template-areas:
  'menu menu menu menu '
  'mainWindow mainWindow mainWindow mainWindow '
  'footer footer footer footer';
}

index

<div class="grid-container">...</div>

other page

<div class="grid-container other-page">...</div>

Upvotes: 1

Related Questions