27653 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
Modérateur
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
Bonjour
Est-ce que bug est toujours d'actualité.?Ou bien depuis le css-grid sur les fieldset dans Edge et Chrome fonctionne?
Cordialement