Fermer

août 5, 2019

5 générateurs de grille Super CSS pour vos mises en page –


CSS Grid s'est avéré être l'évolution la plus excitante de CSS depuis un bon bout de temps. C’est un outil CSS spécifique pour la construction de toute mise en page Web à laquelle vous pouvez penser, du plus simple au plus complexe. Aujourd'hui, CSS Grid est largement pris en charge par tous les principaux navigateurs – il est clair que les jours sombres de piratage de présentations à l'aide de flotteurs sont révolus.

Coder votre disposition CSS Grid directement dans votre éditeur de code peut être amusant. Bien que la spécification soit un document complexe, les concepts clés dont vous auriez besoin pour créer une mise en page simple ne nécessitent pas une courbe d’apprentissage abrupte. CSS Master de Tiffany Brown La grille de Rachel Andrew par exemple et Le terrain de Layout de Jen Simmons sur en haut de la liste.

Pour ceux d'entre vous qui se sentent plus à l'aise de coder des mises en page à l'aide d'un éditeur visuel, il existe plusieurs options en ligne intéressantes que vous pouvez essayer.

Voici cinq outils en ligne CSS avec d'excellentes interfaces visuelles que je vais mettre à l'épreuve. L'idée est la suivante: concevez vos mises en page CSS en grille en quelques clics, saisissez le code et exécutez-le! Mettons cette idée à l’essai et voyons ce qui se passe.

La mise en page de test

Dans cet article, je vais vous fournir cette mise en page CSS Grid codée à la main.

Voir le stylo
exemple de grille CSS sensible
de Maria Antonietta Perna ( @antonietta )
sur CodePen .

. La mise en page a plus que une balise de conteneur HTML fonctionnant comme un conteneur Grid dans une structure imbriquée. J'aurais pu utiliser la nouvelle fonctionnalité de sous-réseau récemment ajoutée à Grid, mais au moment de la rédaction de cet article, seul Firefox 69+ le prend en charge et aucun des générateurs en ligne décrits ici n'a encore implémenté cette fonctionnalité.

Pour la plupart des générateurs CSS Grid, je vais me concentrer uniquement sur le test

    qui fonctionne comme un conteneur Grid pour les cartes individuelles. Voici à quoi ressemble le code:
     .kitties> ul {
      / * styles de grille * /
      affichage: grille;
      grid-template-columns: répéter (ajustement automatique, minmax (320px, 1fr));
      intervalle de grille: 1rem;
    }

Notez que la valeur de la propriété grid-template-columns vous permet, à elle seule, d'ajouter de la réactivité sans interrogation de média en:

  • en utilisant la grille CSS repeat () avec la propriété auto-fit . Vous pouvez ajouter autant de colonnes que vous le souhaitez et elles s'intégreront parfaitement à la largeur de la grille, quelle qu'elle soit.
  • à l'aide de la fonction minmax () qui garantit que chaque colonne a au moins . ] 320px de large, affichant ainsi bien sur des écrans plus petits.

La plupart des générateurs CSS Grid n'incluent pas la possibilité de définir les colonnes grid-template-colonnes à l'aide des fonctionnalités CSS Grid décrites ci-dessus. Vous devrez ajuster les valeurs générées par l'outil dans les requêtes de support pour ajouter de la réactivité à vos présentations.

Lorsque j'essaie les outils du générateur de grille CSS, je vais remplacer le code ci-dessus par le code généré par chaque outil. et examinez ses capacités par rapport aux résultats affichés à l’écran. L'exception sera le quatrième générateur CSS Grid de la liste, un outil basé sur Vue de Masaya Kazama. En effet, il est très simple et rapide de créer l’ensemble du modèle, y compris l’en-tête et le pied de page, en quelques clics et des ajustements mineurs à l’un de ses modèles prédéfinis.

Assez parlé, on va plonger!

1. Générateur de grille CSS par Sarah Drasner

 Le générateur de grille CSS de Sarah Drasner

Le générateur de grille CSS est un nouveau générateur brillant codé par Sarah Drasner . L'interface est super élégante et vous pouvez mettre en place une présentation CSS Grid de base en un rien de temps.

J'ai généré une grille de 2 colonnes et vidé le code dans mon exemple d'origine. Vous avez besoin de requêtes de médias pour rendre la mise en page sensible. Voici le résultat:

Voir le stylo
Générateur de grille CSS n ° 1 de Sarah Drasner
de Maria Antonietta Perna ( @antonietta )
sur CodePen .

Le code ressemble à ceci:

     .kitties> ul {
      / * styles de grille * /
      affichage: grille;
      grid-template-columns: 320px 320px;
      grid-template-rows: 1fr 1fr;
      / * unités pour les espaces entre les lignes et les colonnes
       disponible uniquement en px * /
      grille-colonne-espace: 16px;
      intervalle de ligne de grille: 16px;
    }

Cet outil vous permet:

  • de définir le nombre et les unités de rangées et de colonnes
  • de glisser dans les cases pour y placer des divs

Au moment de la rédaction, le générateur CSS Grid de Sarah vous permet de créer des implémentations simples. des mises en page basées sur la grille CSS. Ceci est clairement indiqué par l'auteur:

Bien que ce projet puisse obtenir une mise en page de base pour vous, ce projet ne constitue pas une visite complète des fonctionnalités de la grille CSS. C’est un moyen pour vous d’utiliser rapidement les fonctionnalités de CSS Grid.

Cependant, s’il s’agit d’un tout nouvel outil open source, il est toujours en développement et la communauté est invitée à contribuer. Des fonctionnalités complexes telles que minmax () ne sont pas encore implémentées, mais elles pourraient éventuellement s'y retrouver plus tard .

2. LayoutIt de Leniolabs

LayoutIt est assez intuitif et comporte quelques fonctionnalités de plus que CSS Grid Generator. Par exemple, il vous permet de définir la propriété grid-gap en unités px em et et ainsi que la grille . -template-columns et de modèles de grille-lignes utilisant minmax () . Cependant, cela ne suffit pas pour assurer la réactivité, vous devez donc toujours ajuster vos valeurs à l'aide de requêtes de médias.

De plus, je n'ai trouvé aucun moyen de définir la propriété grid-gap . Vous devrez le faire manuellement si vous souhaitez des espaces entre les lignes et les colonnes.

Voici le résultat de la saisie du code généré dans mon exemple d'origine:

Voir le stylo
CSS Grid Generator # 2 de Leniolabs
de Maria Antonietta Perna ( @antonietta )
sur CodePen .

Le code en question ressemble à ceci:

     .kitties> ul {
      / * styles de grille * /
      affichage: grille;
      Grille-modèle-colonnes: minmax (320px, 1fr) minmax (320px, 1fr);
      grid-template-rows: 1fr 1fr;
      / * intervalle de grille pas dans le code
      répéter, ajuster automatiquement et remplir automatiquement
      pas ici */
    }

3. Griddy de Drew Minns

 Griddy CSS Générateur de grille de Drew Minns

Avec Griddy vous pouvez définir le nombre de colonnes et de lignes à l'aide de fr px % et auto unités, mais il n'y a pas de fonction minmax () . Vous pouvez ajouter des espaces à vos colonnes et à vos lignes à l'aide des propriétés px et % et des justification-éléments et align-items . éléments dans la grille. Vous aurez besoin de requêtes de médias pour plus de réactivité.

Voici ce que le code généré affiche à l'écran:

Voir le stylo
Générateur de grille CSS n ° 3 de Drew Minns
de Maria Antonietta Perna ( @antonietta )
sur CodePen .

Voici le code généré sur la démo originale:

     .kitties> ul {
      type de style de liste: aucun;
      / * styles de grille * /
      affichage: grille;
      / * pas de minmax * /
      grid-template-columns: 320px 320px;
      grid-template-rows: 1fr 1fr;
      grille-colonne-espace: 16px;
      intervalle de ligne de grille: 16px;
    }

4. Générateur Vue Grid de Masaya Kazama

 Générateur Vue Grid de Masaya Kazama

Le générateur Grid Vue dispose de plusieurs mises en page prédéfinies, du Saint-Graal et de la liste d’articles, que vous pouvez facilement personnaliser en ajoutant et en supprimant des éléments et en ajustant les tailles. C'est la raison pour laquelle, au lieu de me limiter au code CSS Grid du conteneur de cartes, j'ai effectué une approximation de la présentation entière en personnalisant simplement la présentation de la liste d'articles prédéfinie.

Cet outil vous permet de créer votre grille CSS à l'aide du . grid-template-areas et propriétés associées grid-area . En outre, vous avez besoin de requêtes de support pour que la page soit réactive et vous pouvez uniquement définir manuellement la propriété grid-gap .

Voici à quoi ressemblait la présentation par défaut après avoir copié-collé le code généré dans un nouveau Stylo et définition du sélecteur html à 100vh :

 Apparence par défaut du code généré

Ci-dessous le résultat final, après quelques CSS et Ajustements HTML pour se rapprocher de l'aspect et de la convivialité de la démo d'origine:

Voir le stylo
CSS Grid Generator # 4 de Masaya Kazama
de Maria Antonietta Perna ( @antonietta )
. sur CodePen .

5. Générateur de structure de grille CSS par Dmitrii Bykov

 Le générateur de grille CSS codé par Dmitrii Bykov

Le générateur de structure de grille CSS est un générateur de grille CSS complet de Dmitrii Bykov. Pour commencer, vous pouvez visionner la vidéo d’intro qui donne un bref aperçu des capacités de l’outil en action.

Cet outil permet d'accéder à une multitude de paramètres, aussi bien pour le conteneur de grille que pour les éléments de grille. Les fonctions disponibles incluent:

  • Vous pouvez définir la grille en ligne
  • Vous pouvez définir le nombre de colonnes et de lignes à l'aide de fr px em rem vw vh % min-content max-content ] et même utiliser minmax () avec répéter () ajustement automatique et remplissage automatique . Cela signifie que votre mise en page peut être prête à l'emploi
  • Toutes les unités sont disponibles lors du paramétrage de la propriété grid-gap
  • Vous pouvez aligner le contenu de votre page en définissant justification-items align-items motivé-content align-content
  • et bien plus encore.

Going Retour à ma démo d'origine, cet outil est le seul dans la liste qui pourrait reproduire la fonctionnalité du code d'origine.

Voici la démo CodePen:

Voir le stylo
Générateur de grille CSS # 5 de Dmitrii Bykov
de Maria Antonietta Perna ( @antonietta )
sur CodePen .

Conclusion

Les générateurs de grille CSS peuvent être pratiques si vous cherchez un moyen de créer rapidement une présentation de base d'une grille CSS à l'aide d'un outil visuel. N'oubliez pas que ces outils n'offrent généralement pas toutes les fonctionnalités étonnantes de la grille CSS. Parmi les cinq outils que j'ai énumérés ici, seul le générateur CSS Grid de Dmitrii Bykov est capable de la plupart des fonctionnalités détaillées par la spécification et pourrait reproduire parfaitement la version originale, codée à la main.

Enfin, il est utile de connaître les bases de CSS Grid lors de l'utilisation de générateurs en ligne. Cependant, plus vous en apprendrez sur CSS Grid, plus ces éditeurs visuels seront découragés, en particulier lorsque vous vous aventurez dans des mises en page plus audacieuses.






Source link