Accentsconagua
Share
Dans ce tutoriel, nous verrons comment créer plusieurs formulaires Web à l'aide de CSS Grid. Pour chaque exemple, nous utiliserons d’abord des floats, puis nous verrons comment la même présentation pourrait être réalisée avec CSS Grid..
Si vous n'avez aucune connaissance préalable de la grille CSS, jetez un coup d'œil à notre série pour débutants Comprendre le module CSS Grid Layout. Commençons!
Dans cette présentation, nous allons diviser le formulaire en deux colonnes afin d'afficher les étiquettes à gauche et les champs de saisie à droite..
Une approche traditionnelle de cette mise en page pourrait utiliser des flottants pour nous donner nos colonnes. Notez que nous n’avons pas de wrapper pour l’élément de formulaire; nous allons directement appeler les étiquettes et les entrées.
formulaire débordement: masqué; label float: left; largeur: 200px; rembourrage à droite: 24px; input float: left; largeur: calc (100% - 200px); bouton float: right; largeur: calc (100% - 200px);
Vous remarquerez que nous utilisons calc () ici, ce qui nous permet de fixer notre colonne de gauche à 200 pixels de large, tandis que la colonne de droite reste fluide.
Voici le résultat, avec quelques styles supplémentaires pour l'esthétique:
Notre objectif lorsque nous utilisons «Grid» est de définir deux colonnes, puis de placer chaque élément dans la colonne requise..
La première étape consiste à définir notre grille sur l'élément parent forme:
formulaire display: grid;
Ensuite, nous devons diviser cette grille en utilisant Grille-modèle-colonnes:
formulaire display: grid; grid-template-columns: 200px 1fr;
Sur la base de la CSS ci-dessus, la première colonne aura une largeur fixe de 200px tandis que le second prendra 1fr (“Une fraction”) de l'espace disponible restant.
Nous devons maintenant définir l'emplacement de nos étiquettes et de nos entrées. Pour ce faire, nous allons utiliser colonne de grille avec des valeurs spécifiques pour les lignes de la grille:
Pour en savoir plus sur le fonctionnement des lignes de la grille, consultez cette astuce rapide:
Sur la base de ces lignes de grille, nous appliquerons les règles suivantes pour nos étiquettes, nos entrées et le bouton:
label grille-colonne: 1/2; entrée, bouton grille-colonne: 2/3;
Les étiquettes se retrouveront dans la colonne qui commence à la ligne 1 et se termine à la ligne 2. Les entrées et le bouton seront placés dans la colonne qui commence à la ligne 2 et se termine à la ligne 3..
Enfin, nous utilisons fossé ajouter une gouttière de 16 px entre les lignes et les colonnes:
formulaire display: grid; grid-template-columns: 200px 1fr; intervalle de grille: 16px;
Dans cette présentation, nous voulons atteindre les objectifs suivants:
Il est parfaitement possible de construire cette disposition en utilisant des flotteurs. Cependant, nous devrons définir un hauteur min pour la colonne de gauche, sinon elle ne prendra pas toute la hauteur. Il existe d'autres approches «traditionnelles» à ce problème, mais aucune n'est particulièrement jolie.
Pour résumer, avec les flotteurs, nous devons:
hauteur min à la colonne de gauche.débordement caché; préserver la hauteur de l'emballage.zone de texte et envoyer le bouton, puis leur faire remplir toute la largeur.C'est pas mal de travail, non?
Une meilleure approche serait de résoudre ce problème avec Flexbox ou Grid. Dans ce cas particulier, je préférerais utiliser Grid puisque nous organisons des éléments horizontalement et verticalement.
Commençons par déclarer une grille sur notre wrapper et la diviser en deux colonnes.
.wrapper display: grid; Grille-modèle-colonnes: 1fr 2fr;
Notre élément de forme également doit être déclaré une grille:
formulaire display: grid; Grille-modèle-colonnes: 1fr 1fr; intervalle de grille: 20px;
Après avoir appliqué les règles ci-dessus, nous obtiendrons les éléments suivants:
Nous devons laisser les deux derniers éléments remplir toute la largeur en les étirant de la ligne de quadrillage 1 à la ligne de quadrillage 3..
.pleine largeur grille-colonne: 1/3;
Temps pour notre dernière mise en page. Dans cet exemple, nous avons inclus une entrée permettant aux utilisateurs de télécharger leur photo de profil. Il devrait être placé en haut à droite.
Nous allons construire cela avec le balisage suivant:
Couvrant brièvement une approche traditionnelle, nous pouvons réaliser notre mise en page avec les étapes suivantes:
position: relative; à l'élément de formulaire.Ne nous attardons pas trop sur l'approche traditionnelle. Avec Grid, nous allons diviser le formulaire en deux colonnes comme suit:
La première colonne occupera deux fois l’espace horizontal de la deuxième colonne, ce que nous allons réaliser en utilisant fr unités:
formulaire display: grid; Grille-modèle-colonnes: 2fr 1fr; intervalle de grille: 20px;
Une fois la grille établie, nous devons placer les éléments de formulaire entre les lignes 1 et 2 de la grille:
forme p grille-colonne: 1/2;
L'étape suivante consiste à placer le fichier d'entrée dans la deuxième colonne. Pour ce faire, nous allons le placer entre la ligne de quadrillage 2 et la ligne de quadrillage 3. En vous déplaçant verticalement, nous allons le faire parcourir les lignes de la ligne de quadrillage 1 à la ligne de quadrillage 2..
.input-file-wrapper grille-colonne: 2/3; rangée de grille: 1/2;
Bien joué! Nous avons présenté plusieurs exemples d'utilisation de CSS Grid lors de la création de formulaires Web. Comme vous l'aurez remarqué, nous avons économisé beaucoup de temps et d'efforts en écrivant quelques lignes de code, par opposition à l'utilisation de techniques de présentation traditionnelles. Vous pouvez utiliser tous les exemples ci-dessus à partir d'aujourd'hui, grâce à CSS @les soutiens qui nous aident à utiliser une fonctionnalité spécifique comme une amélioration.
Avez-vous des suggestions pour améliorer ces mises en page? Laissez-moi savoir dans les commentaires ci-dessous!
