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 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
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
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
:
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 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 utiliserminmax ()
avecrépéter ()
ajustement automatique
etremplissage 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