mise en page de grille CSS largeur de la colonne changer avec javascript

Question

je tente la mise en place d'une disposition de la grille CSS comme suit

.wrapper { 
    width: 800px; 
    display: grid; 
    grid-template-columns: repeat(3, 200px); 
    grid-template-rows: repeat(5, 200px); 
} 

Est-il possible de localiser la grille-modèle-colonnes JS puis re-dimensionner les colonnes? Je suis tombé sur une situation où je pourrais le trouver (j'ai perdu le code) mais quand j'ai essayé de le changer, Chrome DevTools dit que la valeur est calculée et ne peut pas être changée.

Toute aide qui me pointe dans la bonne direction (ou d'autres façons de le faire, mais l'utilisation de la grille est un must) est très appréciée.

Merci.

Answer 1

@MikeC, si vous n'êtes pas opposé à l'utilisation de jQuery, vous pouvez modifier la largeur de la colonne en utilisant la fonction .css() jQuery, qui

obtenir la valeur d'une propriété de style calculé pour le premier élément en la ensemble d'éléments correspondants ou définir une ou plusieurs propriétés CSS pour chaque élément correspondant.

Vous pouvez en lire plus à ce sujet dans la documentation de jQuery pour la fonction here.

Aussi, juste pour que vous puissiez le voir en action, j'ai mis en place un codeply project que vous pouvez voir en action. Si vous cliquez n'importe où sur la grille, il sera redimensionné (une seule fois). C'est un exemple primitif.

Voici le code jQuery qu'il utilise.

$("#grid").one("click", function() { 
    $(this).css("grid-template-columns", "repeat(2, 400px)"); 
});