10 extraits de code de grille CSS pratiques

La spécification de la grille CSS n'est pas exactement "nouvelle" mais elle est définitivement plus récente dans le monde du développement grand public. De nombreux codeurs frontaux ne connaissent même pas encore les propriétés de la grille CSS, et encore moins comment elles s'appliquent à une interface.

Vous pouvez trouver de nombreux tutoriels en cherchant, mais je vous recommande également d'étudier des extraits de code. De cette façon, vous plongez dans des projets du monde réel afin de voir comment les grilles CSS fonctionnent sur une page Web en direct.

Cette collection devrait offrir de nombreuses ressources pour vous aider à apprendre, personnaliser et relooker les grilles CSS pour tout ce que vous faites sur le Web.

1. Bloc héros multi-images

Commençons avec ce bloc de héros vraiment cool conçu avec des propriétés de grille. Cette conception imite la section d'image de héros de la page d'accueil que vous trouverez sur de nombreux sites Web de style magazine.

Le développeur Rachel Andrew a créé ceci en utilisant un peu de CSS personnalisé à partir de ses propres projets. Cela fonctionne incroyablement bien et la conception est entièrement réactive au démarrage.

Sans oublier qu'il a l'air fantastique sur les écrans mobiles ; pas quelque chose que vous trouvez toujours avec de grands blocs d'image.

C'est une excellente ressource pour étudier les grilles CSS et un extrait pratique pour quiconque code un thème de blog de style magazine.

2. Disposition de la grille CSS

La propriété grid-auto-flow est en plein affichage avec cette démo en utilisant le paramètre "dense". Cela oblige les éléments à se faufiler plus bas dans la page à mesure que la grille se redimensionne.

Avec ce paramètre, vous avez beaucoup de contrôle sur les éléments de page qui changent de position, où ces changements se produisent et comment la grille doit réagir. Cela prend le pas sur les requêtes multimédias qui sont principalement utilisées dans la conception réactive.

Si vous n'êtes pas sûr de ce que fait ce code, n'oubliez pas : Google est votre ami ! Beaucoup de bons messages et de fils de discussion Stack Overflow couvrant toute cette configuration.

3. Des faits pas si effrayants sur la citrouille

Voici un extrait assez cool créé avec quelques faits de base sur la citrouille. Eh bien, les faits de citrouille organisés par une disposition de grille CSS.

Le code s'exécute en fait sur SCSS/Sass, ce qui signifie que vous aurez besoin d'une certaine familiarité avec le langage pour creuser. Mais vous pouvez également compiler le code Sass en CSS brut directement dans CodePen si vous voulez voir les propriétés de base.

L'une de mes choses préférées à propos de ce design est la couleur et la typographie. Ça crie vraiment Halloween avec l'icône de la citrouille et toutes ces nuances de jaune/orange.

4. Disposition hexagonale automatique

C'est peut-être l'un des projets les plus pratiques que j'ai trouvé pour cette galerie. Jetez un œil à ce style de grille et essayez de redimensionner votre navigateur.

Vous remarquerez que les éléments de forme hexagonale se reformatent pour s'adapter à la page en conséquence. C'est probablement la meilleure façon de gérer des pages complexes avec beaucoup de photos. Je vois souvent ce type de mise en page sur les sites Web des conférences et les pages « à propos de nous » pour les entreprises qui comptent beaucoup d'employés.

Maintenant, avec la structure de grille CSS, vous n'avez plus à vous soucier des styles réactifs manuels. Et cet extrait de code est le meilleur point de départ pour planifier une mise en page similaire.

5. Pokedex dans la grille CSS

Je n'ai encore rien vu d'aussi créatif que ce Pokedex dans une grille CSS. Il s'appuie sur HTML et CSS avec un peu de JavaScript pour le remplissage automatique des tailles de cellule.

Au fur et à mesure que vous redimensionnez la page, vous remarquerez que la taille des graphiques eux-mêmes augmente également. C'est sacrément facile à gérer avec CSS, et c'est encore plus facile une fois que vous avez appris certaines des propriétés de la grille.

Notez que ce n'est pas interactif, vous ne pouvez donc pas cliquer sur quoi que ce soit ou ouvrir de nouvelles pages. Mais avec la base de mise en page gravée dans la pierre, il serait très simple d'ajouter ces fonctionnalités.

6. Grille simple

Voici une idée vraiment intéressante qui apporte des styles de conception d'impression sur le Web. Jetez un œil à cet exemple sur CodePen comportant de nombreuses colonnes avec des en-têtes et une typographie surdimensionnée.

La disposition de la grille elle-même repose sur des colonnes définies avec des espaces prédéfinis. Cela signifie que lorsque vous redimensionnez le navigateur, certaines colonnes se décomposent selon ces règles.

C'est un excellent moyen de s'assurer que certaines colonnes apparaissent toujours les unes à côté des autres, ou du moins apparaissent en vue, afin qu'elles soient faciles à lire.

7. Grille CSS avec Flexbox Fallback

Tous les navigateurs n'ont pas rattrapé la structure de grille CSS. C'est pourquoi cet extrait vous apprend à concevoir une grille CSS personnalisée à l'aide de flexbox (et de flotteurs) comme alternative.

C'est en fait délicat car vous souhaitez utiliser les propriétés de la grille si elles sont prises en charge, mais vous souhaitez que le navigateur les ignore si ce n'est pas le cas. Heureusement, le code est bien commenté afin que vous puissiez creuser et même essayer d'ajuster certaines des fonctionnalités par vous-même.

Je n'appellerais pas cela une solution de repli parfaite, mais c'est certainement mieux que rien.

8. Démo de terminologie de grille

Vous n'êtes pas sûr de toute cette terminologie de grille CSS déroutante ? Ensuite, cet extrait peut aider à clarifier les choses.

Si vous creusez dans cet exemple, vous trouverez quelques fonctionnalités en surbrillance avec des descriptions expliquant les grilles en cours de route. Vous apprendrez également comment regarder correctement les lignes de grille et comment voir les grilles CSS avec précision sur la page.

Notez que vous ne tirerez pas tout de cette démo car elle ne couvre pas tout. C'est juste une petite introduction aux propriétés les plus faciles avec des aides visuelles pour vous aider.

9. Utilisation de colonnes de modèle de grille : répéter ()

Pour un exemple très spécifique de la propriété grid-template-columns, jetez un coup d'œil à cette démonstration en direct. Il vous montre comment utiliser la fonction de répétition au lieu de déclarer plusieurs fois la même valeur de colonne dans votre CSS.

Encore une fois, la prise en charge des navigateurs est encore en train de rattraper cela, mais la plupart des navigateurs Web modernes fonctionnent avec cette technique.

Sans oublier que vous trouverez de nombreux commentaires dans le CSS pour vous aider à comprendre ce que cela fait.

10. Mots croisés en grille CSS pur

Pour terminer sur une note amusante, jetez un œil au jeu de mots croisés en CSS pur d'Adrian Roworth. Toute cette mise en page est construite sur rien d'autre que du code HTML et CSS, en particulier les propriétés de la grille CSS pour la structure de la mise en page.

Ce qui est encore plus fou, c'est que vous pouvez entrer du contenu dans les boîtes de mots croisés pour résoudre les énigmes. À quel point cela est cool!

Notez que cette chose est assez complexe et c'est l'un des rares projets répertoriés ici qui n'est pas adapté aux mobiles. Mais c'est la preuve du chemin que nous avons parcouru avec les mises en page de grille sur le Web, donc j'espère que nous verrons beaucoup plus de ce genre de choses dans un proche avenir.