[Résolu] Grid et taille des tracks

Salut,

J'ai un petit pb de grids :
- un footer pleine largeur de page
- contient 2 blocs
- à partir d'une certaine largeur de page (mettons 60rem), je voudrais avoir 3fr pour le bloc A, 1fr pour le bloc B, et 2rem entre les 2
- mais je ne veux pas que l'ensemble A + B + gap (soit le contenu du footer) dépasse les 75rem

Si je mets un max-width au footer, je l'empêche d'utiliser toute la largeur de la page, et ça se verra au niveau de la couleur de fond.
Si je laisse 3fr 1fr, on n'a pas de largeur max au contenu du footer.
Et si j'utilise minmax, je n'ai plus la répartition de l'espace restant avec les fr.

Existe-t-il un moyen de donner une dimension max à la grid, mais pas à l'élément auquel on l'applique (histoire de garder le fond, mais de contrôler le contenu) ?
Merci

@media screen and (min-width: 60rem) {
.barre {
  background: #333;
  grid-template-columns: 3fr 1fr;
  /* La grid : pas plus de 75rem */
}
.barre__a {
  background: #300;
  /* Normalement : width : (largeur grid - 2rem) * 3/4 */
}
.barre__b {
  background: #030;
  /* Normalement : width : (largeur grid - 2rem) * 1/4 */
}
}

Bonjour. Avec un max-width peut-être ?

Salut,

Marvin Le Rouge a écrit :
Existe-t-il un moyen de donner une dimension max à la grid, mais pas à l'élément auquel on l'applique (histoire de garder le fond, mais de contrôler le contenu) ?

Malheureusement non. Je te dirais bein de rajouter des colonnes vides a droit eet a gauche mais ca va etre relou de gérer tout ça.

Le plus simple c'est de faire un wrapper : Un bloc avec ton fond et la width à 100%. Un fils grid avec le maxwidth et dedans tes colonnes.
Modifié par _laurent (18 Aug 2020 - 17:48)

Pardon je n'avais pas lu la problématique jusqu'au bout m’empressant quand-même de répondre...

Donc, je dirais que vous pouvez quand-même utiliser un système comparable à max-width sur le conteneur (qui est le footer) par une technique dénommée "full bleed" : CodePen de démonstration full bleed.

Le secret est dans ces lignes :

.monFooter {
  display: grid;
  grid-template-columns: minmax(0, 75rem); // alternative max-width sans div supplémentaire
  justify-content: center;
}

Modifié par Olivier C (18 Aug 2020 - 18:54)

Oui mais il y a 3 colonnes pas 1 seul... ou alors j'ai pas compris.

_laurent a écrit :
Oui mais il y a 3 colonnes pas 1 seul... ou alors j'ai pas compris.

Tu as raison je planais encore et j'ai répondu à côté de nouveau...

Mais la solution existe, il faut déclarer une grille... dans une grille. Donc définir une nouvelle grille pour le footer qui lui-même est l'élément d'une grille au niveau du layout principal.

Un exemple que je viens de faire incluant la problématique de Marvin Le Rouge : CodePen.

Je suis partit de l'un de mes essais de template avec grid dont le layout est définit avec grid-area, mais ça n'a pas d'importance ici, c'est juste pour l'exemple.

Le passage clef :

@media (min-width: 36.01rem) {
  .footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 29.333333333333332rem));
    justify-content: center;
    gap: 1rem;
  }
}

Le media queries c'est pour prendre en compte l'aspect responsive. Pour le calcul des colonnes je vous laisse voir sur le codepen, mais disons qu'en gros il faut soustraire les gouttières au conteneur principal puis diviser par le nombre de colonnes recherchées.
Modifié par Olivier C (18 Aug 2020 - 23:33)

Hello,

Le sujet est très intéressant car j'ai également pu tester pas mal d'idées... qui ne fonctionnaient pas.

Ma première piste a été de tester ceci :

grid-template-columns: minmax(3fr, 60rem) minmax(1fr, 15rem);

Mais le navigateur refuse simplement ces valeurs sans que je ne comprenne pourquoi.

Au final, la solution que je propose devient bien vite beaucoup plus alambiquée...

.grid {
  --gutter: 2rem;
  --max-width: 75rem;
  --available: calc((100% - var(--max-width)) / 2 - var(--gutter));
}

.grid {
  display: grid;
  grid-template-columns: var(--available) minmax(0,3fr) minmax(0,1fr) var(--available);
  gap: var(--gutter);
  word-break: break-word;
}

.barre__a {
  grid-column: 2;
}
.barre__b {
  grid-column: 3;
}

La voici en action : https://codepen.io/raphaelgoetter/pen/yLOJwQN?editors=1100

J'espère que quelqu'un trouvera plus simple !
Modifié par Raphael (19 Aug 2020 - 14:30)

Salut !

Raphael a écrit :
Ma première piste a été de tester ceci :

grid-template-columns: minmax(3fr, 60rem) minmax(1fr, 15rem);

Mais le navigateur refuse simplement ces valeurs sans que je ne comprenne pourquoi.

J'ai aussi bloqué dessus il y a quelques semaine et en fait :

mozilla a écrit :
Si max < min, max est ignoré et minmax(min,max) correspond à min. Utilisé comme maximum, une valeur <flex> permet de définir le facteur de flexibilité d'une piste de la grille, elle est invalide comme minimum.

https://developer.mozilla.org/fr/docs/Web/CSS/minmax

Bah on peut juste pas mettre de fr en min
Modifié par _laurent (19 Aug 2020 - 14:35)

_laurent a écrit :
Bah on peut juste pas mettre de fr en min

Ah.
Bon, au moins c'est clair, merci

Bonsoir,
comme evoqué par Laurent, le plus simple est surement d'intercaler un élément en plus qui se centre de lui même quand il faut.

<footer>
  <div class="buffer75rem">
    <div>3fr</div>
    <div>1fr</div>
  </div>
</footer>

et

 
.buffer75rem {
  margin: auto;
  max-width: 75rem;
  display: grid;
  grid-template-columns: 3fr 1fr;
} 

ou bien peut-être une mediaquerie pour switcher de template .

footer
{
  display:grid;
  grid-template-columns: minmax(0,56.25rem) minmax(0,18.75rem );
  justify-content:center;
}
@media screen and (max-width : 75rem) {
footer{
 grid-template-columns: 3fr 1fr;
}}

Codepen pour jouer avec : https://codepen.io/gc-nomade/pen/NWNRMZR

Raphael : la solution est intéressante, mais compliquée, et on ajoute 2 gouttières sur les côtés.
gcyrillus : Et on en revient au bon vieux wrapper La seconde solution perd la répartition 3/1 au-delà de 75rem, bien que ce ne sera probablement pas perceptible.

Bonjour,

je crois que nous avons fait le tour de ton soucis, laisse nous savoir quelle solution tu garderas.

Ma préférence irait pour celle de Raphaël , puis les mediaqueries et enfin le <div></div> en sus selon quels navigateurs tu souhaites faire entrer dans la danse Mais ce n'est que mon opinion.

Cdt

Alors, j'ai opté pour le wrapper : pas le plus propre niveau sémantique, mais rapide, efficace, et permet de conserver la répartition par fraction unit. Donc j'ai juste un .footer__content intercalé entre le footer et les éléments (la même que ton .buffer75rem).

Merci tout le monde
Modifié par Marvin Le Rouge (20 Aug 2020 - 12:00)