Expérimenter avec layout breakout

Ce soir, je me suis essayé à implémenter la technique décrite par Kevin Powell dans sa vidéo A new approach to container and wrapper classes(Opens in a new window)⎋

J'ai ajouté les éléments suivants :

// In __config.scss
$max-txt-content-width : 720px;

%content-grid {
  display: grid;
  grid-template-columns: 
    [fullwidth-start]   minmax(0, 1fr)
      [breakout-start]  minmax(0, 4rem)
        [content-start] min(100%, $max-txt-content-width) [content-end]
                        minmax(0, 4rem) [breakout-end]
                        minmax(0, 1fr) [fullwidth-end];
    
    > * {
      grid-column: content;
    }
    
    > .breakout {
      grid-column: breakout;
    }
    
    > .fullwidth {
      grid-column: fullwidth;
    }
}

// In _foundation.scss
.content-grid, 
.fullwidth,
.base {
  @extend %content-grid;
}

.base > main {
  grid-column: fullwidth;
  @extend %content-grid;
}

De la manière dont je l'ai implémenté, la grille s'applique à toutes mes pages qui hérite du template de base. Mais pas sur les autres car j'ai pour l'instant déjà implémenté un système de grille sur ceux-ci.

Deux inconvénients pour l'instant à cette technique :

1. Problème général : il faut réappliquer la grille depuis le conteneur principal à chaque sous-nœud jusqu'au nœud où l'on souhaite l'utiliser. Cette approche n'est donc pas très appropriée pour les pages avec beaucoup de contenus imbriqués.
2. Problème spécifique à mon cas : actuellement la largeur full-width ne va pas vraiment jusqu'aux bords de l'écran, à cause des marges de sécurités que j'ai appliqué sur le body de toutes les pages.
   - Je pourrais retirer cette marge et l'appliquer comme largeur minimale entre les lignes fullwidth et breakout
   - mais je n'aurais alors plus de marges de sécurité sur les templates spécifiques (notamment celui de mes entrées de journal)

Bref, cette approche est intéressante, mais si je veux l'implémenter, il va falloir basculer à 100% dessus et revoir mes structures de page actuelles.