Catégories
Astuces et Design

18 dispositions de grille pour créer de superbes sites Web

Lors de la création d'un nouveau site Web, il est toujours judicieux de s'asseoir et de réfléchir à tout le contenu que vous souhaitez vraiment présenter. Si vous trouvez que vous avez beaucoup à dire, les dispositions de grille sont toujours un bon choix. Pour commencer, la plupart sont réactifs et ajusteront automatiquement l'orientation en fonction de la taille de l'écran sur laquelle chaque visiteur le visualise.

Mais ils constituent également un bon choix car ils offrent un moyen pratique d'afficher beaucoup d'informations dans un espace condensé sans être accablant. Ce qui suit est une liste de mises en page de grille gratuites et premium provenant de divers endroits, y compris ThemeForest et CodePen, qui offrent flexibilité et fonctionnalité pour la conception de votre site Web.

Boîte à outils Web Designer: téléchargements illimités à partir de 16,50 $ / mois

Kits de sites Web

Kits de sites Web

Plus de 16 000 conceptions Web

Kits UX et UI

Kits UX et UI

Plus de 14 000 kits UX et UI

Ressources graphiques

Ressources graphiques

33 000+ graphiques

TÉLÉCHARGER MAINTENANT

Éléments Envato


Exemple de grille à 12 colonnes

Créez jusqu'à une grille à douze colonnes avec ce modèle de disposition de grille. C’est simple, direct mais fait définitivement le travail.

Voir le stylo
Disposition de la grille CSS – Zones de modèles par les développeurs Mozilla (@mozilladevelopers)
sur CodePen.

Une autre option est cette disposition de grille CSS. Il propose des zones modélisées dans lesquelles vous pouvez ajouter du contenu personnalisé. Il offre également plusieurs options de remplissage.

Exemple de Roph

Voici maintenant un thème WordPress qui fournit une disposition de grille que vous pouvez utiliser de multiples façons. Il est conçu pour les sites Web de portefeuille et le ciel est la limite de la façon dont vous pouvez envisager de l'utiliser.

Voir le stylo
Disposition de la grille CSS – Nouvelle terminologie par Stacy (@stacy)
sur CodePen.

Cette mise en page CSS Grid est très simple, mais elle faciliterait certainement la création d'un site Web personnalisé capable de transmettre beaucoup d'informations à la fois. Il prend également en charge de jolis effets de survol.

Exemple de Mono

Il s'agit d'un modèle HTML5 qui offre une disposition de grille élégante que vous pouvez utiliser de différentes manières. Avec plusieurs modèles, combinaisons de couleurs et paramètres parmi lesquels choisir, vous êtes sûr de trouver ici quelque chose qui répond à vos besoins.

Voir le stylo
CSS Grid Layout avec @support flexbox fallback par Gustaf Holm (@primalivet)
sur CodePen.

Ou vous pouvez utiliser cette disposition CSS Grid avec une solution de secours Flexbox qui offre des effets intéressants et un look attrayant.

Exemple de Stash

Stash est un thème de création de blocs WordPress que vous pouvez utiliser pour créer un site Web de haute qualité pour les entreprises, les sites d'entreprise et les sites de commerce électronique.

Exemple de Juno

C'est une si belle mise en page! Juno est un thème WordPress idéal pour les portfolios et les sites Web de photographie.

Voir le stylo
Véritable maçonnerie avec disposition en grille par Balázs Sziklai (@balazs_sziklai)
sur CodePen.

Ceci est une autre option super simple qui offre une disposition de grille de maçonnerie que vous pouvez personnaliser dans une variété de configurations.

Voir le stylo
Démonstration de disposition de grille CSS 5 – Grid Gap par Stacy (@stacy)
sur CodePen.

Une autre excellente option est cette mise en page CSS Grid. Modifiez la largeur de chaque colonne, ajustez le nombre de lignes et modifiez leur configuration.

Voir le stylo
CSS Grid Layout – Modèle d'article de blog par Stacy (@stacy)
sur CodePen.

Il s'agit d'un autre modèle de mise en page de grille qui offre une mise en page de billet de blog que vous pouvez utiliser pour votre blog HTML.

Voir le stylo
Disposition de la grille Flexbox avec menu mobile par Lindsey (@cssgirl)
sur CodePen.

Ou vous pouvez utiliser cette disposition de grille Flexbox pour un modèle d'article de blog. Il comprend également un menu mobile.

Voir le stylo
Magazine Grid Layout Vol. II par ilithya (@ilithya)
sur CodePen.

Si vous souhaitez créer une publication, cette disposition en grille de magazine devrait faire l'affaire.

Voir le stylo
Content Grid System (CSS Grid Layout) par Tobias Gerlach (@ Gerlach360)
sur CodePen.

Voici une autre excellente option. C'est un système de grille de contenu que vous pouvez utiliser pour afficher de nombreuses informations à la fois.

Voir le stylo
Démo Flex and Grid par rachelandrew (@rachelandrew)
sur CodePen.

La mise en page de démonstration Flexbox et CSS Grid est idéale pour présenter des informations sur des cartes sur une partie de votre site Web. Pensez aux descriptions de vos services ou aux tableaux de prix.

Voir le stylo
Disposition de la grille CSS + Mondrian = <3 par Toaster (@ToasterCo)
sur CodePen.

Cette disposition en grille peut être utilisée pour mettre en évidence du contenu ou créer votre propre œuvre d'art. C'est à vous.

Voir le stylo
Disposition de la grille de maçonnerie par Marco Biedermann (@marcobiedermann)
sur CodePen.

Créez quelque chose de monochromatique et d'impact avec cette disposition de grille de maçonnerie. Utilisez-le pour un portfolio, pour afficher des photographies ou pour créer une expérience.

Voir le stylo
Grille de colonnes Flex 12 par Nick Else (@nickelse)
sur CodePen.

La disposition Flex 12 Column Grid est la dernière de notre liste et une autre option solide. Affichez facilement autant d'informations que vous le souhaitez de manière organisée et accrocheuse.

Créez votre meilleur site Web avec des mises en page en grille

Et voila! Une autre liste terminée. Nous espérons que cela vous servira bien. Cette collection de mises en page de grille comporte des sélections qui sont toutes faciles à utiliser et agréables à regarder. Profitez de la sélection de celle qui servira bien votre contenu.

Bonne chance!

Cet article peut contenir des liens affiliés. Voir notre divulgation sur les liens d'affiliation ici.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *