28172 sujets

CSS et mise en forme, CSS3

Bonsoir,

je continue mon apprentissage et la transformation de mes mises en forme (avec float) vers grid-layout.
Layout habituel :

.wrapper {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
}

En passant à grid layout, j'ai renoncé à ce wrapper global (??) et pour reproduire cette mise en page:

grid-column-gap: 2%;
grid-template-columns: [full-start] 1fr [content-start] repeat(6, 15%) [content-end] 1fr [full-end];

Comment indiquer que la largeur totale des 6 colonnes du content aient une largeur maximale de 1200px?
Passer par une sous-grille?
Cordialement
Modérateur
Hello,
Pas sûr d'avoir compris tellement ça parait évident. Ton élément en display grid peut avoir un width/max-width/margin... C'est quoi le problème ? Smiley smile
Si c'était sur l'ensemble de la grille... oui ce serait facile.
Mais c'est seulement sur la partie du milieu (6 colonnes) en excluant les deux colonnes externes que je veux faire porter le max-width.
Bonjour,

1200px divisé par 6… je dirais que chaque colonne devra faire au maximum 200px.
Rajouter un minmax(15%, 200px) ?

Smiley smile
Meilleure solution
C'est ce que j'avais fait, mais cela ne fonctionne pas completement : les colonnes ne setrouvent pas forcément égales.
Pour cela que je pensais à une sorte de wrapper autour de ces 6 colonnes --> grilles imbriquées?
Je vais reessayer.