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é?
un exemple ici:
https://codepen.io/anon/pen/EzoXGq
merci d'avance pour votre aide
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
