341 outils gratuits
Outils en ligne
341 outils gratuits, sans inscription ni installation, tout se passe dans votre navigateur.
341 outils gratuits, sans inscription ni installation, tout se passe dans votre navigateur.
Visualisez et générez du CSS Grid
CSS Grid range en deux dimensions là où Flexbox range en une seule, et sa syntaxe se retient mal parce qu'on ne s'en sert pas tous les jours. Cet outil compose une grille avec son nombre de colonnes, de lignes et son espacement, l'affiche en direct et rend le CSS correspondant. C'est plus rapide que de retrouver une antisèche, et cela ancre la notion la plus utile du modèle, l'unité de fraction, qui répartit l'espace restant au lieu de le calculer. Tout se passe dans le navigateur.
Grid quand la mise en page a des lignes et des colonnes qui se répondent, Flexbox quand les éléments s'alignent sur un seul axe et se répartissent selon leur contenu. Les deux se combinent très bien : une grille pour la page, un conteneur flexible à l'intérieur de chaque cellule.
À répartir l'espace disponible en parts. Trois colonnes en `1fr 2fr 1fr` occupent le quart, la moitié et le quart de la largeur, quel que soit l'écran, sans le moindre calcul de pourcentage et sans se soucier des espacements, qui sont retirés avant la répartition.
Avec une répétition automatique et une taille minimale par colonne : la grille place autant de colonnes que la largeur le permet et passe à la ligne toute seule. C'est la mise en page responsive la plus courte à écrire, et elle se passe entièrement de requêtes média.
Un résultat qui vous paraît faux, une valeur périmée, un cas qui manque ? Signalez-le à contact@topapps.fr