Black Friday Sale! Save up to 50% off!
  1. Domicile
  2. Caractéristiques
  3. Éléments de page Web
  4. Élément de grille
  5. Grille En Modes Réactifs

Comment utiliser la grille dans les modes réactifs

Les éléments de la grille sont très utiles pour créer des modes réactifs, car dans les écrans plus petits, les cellules de la grille se déplacent automatiquement les unes sous les autres. De plus, pour de nombreuses mises en page, vous pouvez modifier l'ordre des cellules de la grille sur toutes les vues mobiles. Choisissez l'élément de grille, basculez le mode réactif sur la barre supérieure, ajustez votre grille, si nécessaire. Pour la plupart des grilles, vous n'avez pas besoin de faire des ajustements.
Apprendre encore plus

Parcourir par catégories de fonctionnalités

Éléments de page Web
Systèmes pris en charge
Éditeur de pages visuelles
Éléments de design
Médiathèques
Propriétés des éléments
Sensible
Effets d'animation
Réglage des thèmes
Formulaire de contact
En-tête et pied de page
Blog
Commerce électronique
Référencement
Code personnalisé
Fonctionnalités de l'application
Propriétés du site et de la page
Widget WordPress

Tout ce dont vous avez besoin pour créer votre site Web gratuit

Utilisez notre Website Builder pour concevoir et créer des sites Web sans codage. Faites glisser et déposez tout ce que vous voulez, où vous le souhaitez. Le créateur de site Web adapte automatiquement votre site Web pour mobile afin de le rendre réactif. Choisissez parmi plus de 9 000 modèles de sites Web personnalisables.

Télécharger pour Windows Télécharger pour Mac

Fonctionnalités associées

Modifier la disposition de la grille

Vous pouvez modifier la disposition de la grille ajoutée en bloc à tout moment. Sélectionnez l'élément de grille, puis accédez au panneau de propriétés. Cliquez sur la flèche pour ouvrir la liste des préréglages de grille et sélectionnez la mise en page qui convient le mieux à votre idée de conception Web. Vous pouvez également ajouter et supprimer des cellules de grille dans l'éditeur.
Grille en boîte et large

Vous pouvez facilement changer la largeur de la grille de Boxed à Wide et vice versa. Sélectionnez une grille, puis accédez au panneau de propriétés. Localisez l'icône Boxed/Wide près des valeurs de largeur et de hauteur, et modifiez la disposition de la ceinture en cliquant sur cette icône.
Basculement de la disposition de la grille

L'élément Grid est très flexible. Vous pouvez ajuster sa mise en page aux exigences de votre idée de conception de sites Web. Pour retourner la Grille que vous avez placée dans un Bloc. Sélectionnez cet élément, puis accédez au panneau de propriétés à droite. Cliquez sur la liste déroulante Retourner près de la disposition de la grille. Cliquez sur Retourner ou Rotation pour effectuer l'opération.
Type d'arrière-plan de cellule de grille

Une cellule de l'élément de grille peut avoir un arrière-plan et vous pouvez utiliser différents types pour cela. Vous pouvez appliquer le remplissage de couleur, le dégradé, l'image, la vidéo ou ne pas avoir d'arrière-plan du tout. Sélectionnez une cellule de grille et accédez au panneau de propriétés. Choisissez un type d'arrière-plan qui convient le mieux à votre conception Web.
Déplacer les cellules de la grille

Les grilles permettent d'organiser divers contenus, y compris des images, des icônes, des formes et du texte sous forme de cellules, qui sont très pratiques à utiliser. Dans notre éditeur visuel, vous pouvez facilement déplacer des cellules dans une grille en faisant simplement glisser une cellule sur une autre, en perfectionnant votre mise en page et votre contenu pour votre conception Web. De plus, vous pouvez cliquer sur les icônes fléchées de l'outil contextuel de la cellule pour déplacer la cellule.
Plus de 80 dispositions de grille
Plus de 80 dispositions de grille

Obtenez la plus grande variété de mises en page de grille pour votre conception Web. Les éléments de grille vous aident à rendre automatiquement vos conceptions adaptées aux mobiles.
Espace entre les cellules de la grille

Vous pouvez modifier l'espacement entre les cellules de la grille en fonction de vos exigences de conception Web. Pour cela, vous pouvez utiliser la propriété Cell Gap dans le panneau de propriétés. Sélectionnez une grille, puis accédez au panneau de propriétés, faites défiler le panneau, faites glisser le curseur pour modifier l'écart.
Grille pour appareils mobiles
Grille pour appareils mobiles

Utilisez l'élément de grille pour créer facilement les modes réactifs. Sur les petits écrans, les cellules de la grille se déplacent automatiquement les unes sous les autres.
Passez le curseur sur une cellule de la grille

L'animation Slider est une réaction très populaire sur Hover. Vous pouvez ajouter divers effets pour les cellules de la grille, par exemple, Fade, Overlay, Slide, Flip, Wobble et Zoom. Sélectionnez une cellule de grille, puis accédez au panneau de propriétés. Cliquez sur le lien Hover Slide, puis choisissez l'effet que vous souhaitez voir sur le Hover de la Grid Cell.
Redimensionner les cellules de la grille

Si vous avez besoin de créer des mises en page sophistiquées pour vos images, formes et textes, vous pouvez redimensionner les cellules de la grille de différentes largeurs pour donner à vos conceptions un aspect moderne.

Modèles gratuits avec Élément de grille

Commencez avec nos meilleurs modèles, parfaits pour toute entreprise. Créez et personnalisez-les avec notre créateur de site Web puissant et gratuit sans code. Tous les modèles sont adaptés aux mobiles et ont fière allure sur n'importe quel appareil.

How To Use The Grid To Fit Various Screen Sizes In Responsive Modes

Our builder provides a responsive Grid layout constructor that automatically adjusts to any current screen size. You can test it if you use the Responsive Mode at the top of your dashboard. Pick various screen sizes and see how your CSS grid layout changes its responsive Grid design per screen size. However, it is very simple if you want to make personal customizations of how your CSS Grid layout will look on the particular screen size and how your columns and rows will be positioned. Select the device screen size in the Responsive Mode and adjust your Grid system. No matter the number of columns or rows present in your responsive Grid, whether a two-column layout, three-column layout, or even 12 columns, you will be able to position the most important cells and content before other materials.

Feel free to resize no matter the width of your column layout, but make sure to check the Grid columns in the Responsive mode to confirm the correct display of the main content. Be sure o spread the remaining space equally between Grid columns to prevent the users from using the Skip To Main Content button. Using a responsive Grid system, you can apply the media queries code and understand how it works. CSS Grid layout using media queries can organize a one-column layout, three-column layout, or 12 columns layout Grid and set different breakpoints for the responsive design. Using CSS Grid layout in different breakpoints will save you the time of customization of column widths because setting one column width will automatically adjust others.

Set the Grid system layout using the desired number of grid columns and put the required space between layout Grid cells. The layout Grid system will indicate the number of columns and monitor column widths CSS, how it works, and displays the layout Grid container. Using CSS Grid container in the layout Grid system without writing media queries can affect certain media query features you would like to customize in the future so consider it before getting started. Customize rows and columns using all available tools in our builder and make your beautiful Grid layout using your imagination and helpful suggestions. Modify your Grid layout using simple adjustment options in our Property Panel.

Company
Product
Themes & Templates
Nicepage
Web Design