Disposition de démarrage de grille CSS - Astuces CSS

Il s'agit d'une collection de modèles de démarrage pour les mises en page et les modèles utilisant CSS Grid. L'idée ici est de montrer ce que la technique est capable de faire et de fournir un point de départ qui peut être réutilisé pour d'autres projets.

N'oubliez pas que la prise en charge de Grid par les navigateurs est bonne mais nécessite des solutions de secours pour les anciens navigateurs. Cela signifie qu'un copier-coller direct de ceux-ci peut ne pas convenir à certains cas d'utilisation.

Disposition du Saint Graal

La vieille disposition classique à trois colonnes où deux barres latérales et un conteneur contenant la copie du corps sont pris en sandwich entre un en-tête et un pied de page pleine largeur.

Saint Graal flexible

Tout reste intact lorsque la largeur de la fenêtre change à l'aide d'un conteneur de contenu fluide.

Voir la grille CSS Pen - Holy Grail 2 de Geoff Graham (@geoffgraham) sur CodePen.

Adaptatif Saint Graal

Les choses s'empilent une fois que la fenêtre devient étroite.

Voir la grille CSS Pen: Holy Grail Layout - Responsive par Geoff Graham (@geoffgraham) sur CodePen.

2 colonnes avec en-tête et pied de page

Une mise en page de blog classique où une colonne est pour l'article et l'autre pour une barre latérale.

2 colonnes flexibles

La mise en page devient molle lorsque la fenêtre devient étroite mais la mise en page reste en place.

Voir la grille CSS du stylet: en-tête, pied de page avec 2 colonnes (flexible) par Geoff Graham (@geoffgraham) sur CodePen.

Responsive 2 colonnes

Les choses s'empilent sur des écrans plus petits.

Voir la grille CSS du stylet: en-tête, pied de page avec 2 colonnes (réactif) par Geoff Graham (@geoffgraham) sur CodePen.

Répartis uniformément, ajustés selon les besoins

Les éléments affluent dans la mise en page et se terminent lorsqu'il n'y en a plus.

Voir la grille CSS Pen uniformément distribuée, autant que nécessaire par Geoff Graham (@geoffgraham) sur CodePen.

Article avec Breakout

Une super petite astuce de Tyler Sticka qui permet à un élément de sortir de la grille. Rachel Andrew explique en détail comment les lignes de grille nommées permettent à cela de fonctionner.

Voir la grille CSS Pen: article avec Breakout par Geoff Graham (@geoffgraham) sur CodePen.

Calendrier de base

Comme vous vous en doutez, CSS Grid fonctionne bien pour une grille de calendrier.

Voir le Pen CSS Grid: Calendar de Geoff Graham (@geoffgraham) sur CodePen.

Conseil de monopole

Une simple reconstitution du plateau de jeu. Jen Simmons a une démo douce avec des styles Monpoly.

Voir le Pen CSS Grid: Monopoly Board par Geoff Graham (@geoffgraham) sur CodePen.

Nos maîtres frontend partenaires d'apprentissage

Besoin d'une formation en développement front-end?

Frontend Masters est le meilleur endroit pour l'obtenir. Ils ont des cours sur toutes les technologies front-end les plus importantes, de React au CSS, de Vue à D3, et au-delà avec Node.js et Full Stack.