26749 sujets

CSS et mise en forme, CSS3

Bonjour,
Je suis face à un petit problème de mise en page avec grid et de multiple recherche je n'arrive pas à trouver la solution.

Alors, donc, j'essaie de me faire un petit template réutilisable pour de multiple formulaire. En gros, je crée 6 colonnes et je place les champ de formulaire selon le nombres de colonnes que je veux qu'elles prennent à l'aide d'une class. Ça fonctionne très bien sous Firefox, mais rien ne se passe sous Chrome et Edge, tout reste l'un en dessous de l'autre. Y'a peut-être un truc que j'ai manqué?


fieldset {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr [6];
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 10px 20px;
    }

@media screen and (max-width: 630px) {
    fieldset {
        -ms-grid-columns: (minmax(250px, 1fr))[auto-fill];
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media screen and (min-width: 631px) {
    fieldset .col-2 {
        -ms-grid-column: span 2;
            grid-column: span 2;
    }

    fieldset .col-3 {
        -ms-grid-column: span 3;
            grid-column: span 3;
    }

    fieldset .col-4 {
        -ms-grid-column: span 4;
            grid-column: span 4;
    }

    fieldset .col-5 {
        -ms-grid-column: span 5;
            grid-column: span 5;
    }

    fieldset .col-6 {
        -ms-grid-column: span 6;
            grid-column: span 6;
    }
}


un exemple ici:
https://codepen.io/anon/pen/EzoXGq


merci d'avance pour votre aide
Salut,

On dirait que c'est l'élément <fieldset> qui peut pas blairer le grid... Essaie avec une div et en utilisant une classe dans le CSS, ça règle le soucis pour moi.

Je n'ai pas cherché pourquoi fieldset ne le prend pas, mais il doit y avoir une incompatibilité....
Meilleure solution