My main page currently consists of a menu, sidebar, and main window. However, when I redirect to another page, I want the sidebar to disappear.
Is it possible to achieve this using CSS grids without the need for two separate CSS files?
For instance, here is the grid setup 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;
}
When redirected 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;
}