Grid Layout

Affichage/masquage d'un élément contenu dans une Grid Layout.

Rendu

Header
Un
Deux
Trois
Quatre
Main
Right
Footer

CSS appliqué

.grid-container {
  display: grid;
  grid-template-areas:
    "header header  header  header  header  header"
    "left   main    main    main    main    right"
    "left   footer  footer  footer  footer  right";
  gap: .5em;
}
.grid-container.without-left {
  grid-template-areas:
    "header header  header  header"
    "main   main    right   right"
    "footer footer  footer  footer";
}
.grid-container.without-left .left {
  display: none;
}