L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Modèles de conception éditoriaux avec grille CSS et colonnes nommées
De nombreux sites Web, en particulier ceux qui affichent un contenu de forme longue, ont un motif de répétition assez simple: une zone de pleine largeur pour les images, une zone de contenu centrale et peut-être une vue divisée de deux blocs de demi-largeur. Ces composants se répètent pour afficher un article, des images et d'autres contenus associés – les éditeurs de contenu sélectionnant le bon composant lorsqu'ils créent des articles pour publication.
Dans cet article, je vais vous présenter une approche de ce type de conception éditoriale, qui s'appuie sur quelques techniques dont certaines sont discutées dans les articles suivants:
En plus du fait qu’il s’agit d’un moyen agréable de nommer des sections de votre mise en page, cette technique expose tout un ensemble de choses intéressantes sur la disposition de grille que vous pouvez trouver. utile pour créer vos propres modèles de disposition. Cela témoigne également davantage des promesses de la sous-grille (une partie du prochain niveau 2 de la spécification de grille et étant implémentée dans Firefox).
Nommer les éléments dans l'agencement de grille CSS
Lorsque vous utilisez CSS Grid Layout, vous pouvez nommer des lignes. et les zones. Ces deux choses peuvent rendre le travail avec Grid, en particulier les grilles complexes, plus simple. Définir des conventions de dénomination pour les éléments de votre mise en page peut être utile lorsque vous travaillez avec votre équipe. il est beaucoup plus facile de comprendre où tout ce qui est placé avec la grille-zone: content finira par avoir quelque chose placé de la colonne-colonne : 3/9 .
Lorsque vous utilisez le grille-modèle-zones vous attribuez un nom aux éléments que vous souhaitez placer sur la grille en utilisant la propriété grid-area puis en les plaçant autour de la grille. Dans l'exemple suivant, l'élément avec grid-area: content est placé dans la zone de grille définie par la propriété grid-template-areas :
Voir le stylo [Layout With Named Area] ( https://codepen.io/rachelandrew/pen/zYOQBba) de Rachel Andrew .
Cela fonctionne bien pour les composants pour lesquels vous avez un élément à entrer dans une zone. Toutefois, si vous souhaitez placer plusieurs éléments dans la zone de contenu (l'un en dessous de l'autre), l'utilisation de grid-area n'est pas la bonne approche. Vous pouvez plutôt définir les noms des lignes de colonne et placer l'élément de la ligne de début à la fin.
Voir le stylo [Layout With Named Columns] (https://codepen.io/rachelandrew/pen/xxKNONQ) de Rachel Andrew .
Toutefois, cette approche n'est pas aussi nette lorsque vous utilisez l'approche par grille. nous devons connaître les lignes de début et de fin lorsque vous placez un élément utilisant grille-colonne ou grille-ligne – ou le faisons-nous?
Jetez un coup d'œil au prochain exemple CodePen . Mes objets sont placés avec un seul nom ou identifiant avec la propriété grille-colonne même si certaines zones de la grille ciblées traversent plusieurs colonnes:
Voir le stylo [Layout with Named Columns] (https : //codepen.io/rachelandrew/pen/mdbYEod) de Rachel Andrew .
Pour comprendre comment je me suis rendu ce point nécessite une compréhension de quelques éléments concernant CSS Grid Layout, ainsi que des lignes et des zones nommées.
Nous pouvons nommer des lignes
Comme vous l'avez déjà vu dans mon deuxième exemple ci-dessus, nous pouvons nommer des lignes sur la grille. cela peut être à peu près tout ce que nous aimons – à part le mot span . Le nom est un ident plutôt qu'une chaîne, raison pour laquelle il n'est pas cité
. Cependant, vous verrez de nombreux exemples où les conventions de nommage désignent le début et le . name-end est utilisé et ajoute -start au nom de la ligne de départ et -end au nom de la ligne de fond. Ce n'est pas purement conventionnel et pour la technique, je vais vous montrer pourquoi nous devons nommer nos lignes de cette façon. Vous devez donc choisir un nom pour la zone que vous décrivez, puis ajouter les suffixes -start et -end – qui doivent être identiques, bien sûr!
Nous nommons notre lignes entre crochets. Les lignes peuvent (et doivent souvent) avoir plusieurs noms. Dans ce cas, l'espace sépare les noms. Lorsque vous placez les éléments à l'aide du positionnement basé sur les lignes, vous pouvez choisir n'importe quel nom pour la ligne.
Une fois nos lignes nommées en place, vous pouvez placer nos éléments à l'aide de la colonne de grille en spécifiant le nom de la ligne de début et de fin. Ce modèle est identique à l'utilisation des numéros de ligne, le nom précédant la barre oblique est la ligne de départ et le nom suivant est la ligne de fin.
Voir le stylo [Example using start and end lines] (https://codepen.io/rachelandrew/ pen / VwZOPgO) de Rachel Andrew .
Ceci place les éléments mais Ce n'est pas le nom unique par article que j'ai utilisé dans l'exemple. Cependant, tout est maintenant en place grâce à la façon particulière dont Grid traite les zones et les lignes nommées.
Les noms de ligne nous donnent un domaine nommé
En supposant que vous ayez nommé vos lignes avec -start et -end comme moi, Grid vous donnera une zone nommée du nom principal que vous avez utilisé. Par conséquent, dans mon cas, j'ai des zones nommées content moitié moitié moitié complet et centre . Chacune de ces zones est une seule ligne (car je n'ai pas de lignes nommées), cependant, elle s'étend sur les traces de colonne de la ligne -start à la ligne -end . [19659031] Les zones nommées donnent une ligne nommée du nom principal utilisé
Si nous voulons pouvoir placer nos éléments comme si nous avions un nom de colonne, nous devons également utiliser le fait que lorsque nous créons une grille zone, nous obtenons un nom de ligne du nom principal utilisé; c'est-à-dire que le nom principal étant le nom avec -start et -end supprimé. Ce nom de ligne indique le début ou la fin de la zone selon que nous visons grille-colonne-début ou grille-colonne-fin .
Nous avons donc un zone nommée content car nous avons des lignes de colonnes nommées content-start et content-end . La zone nommée content nous donne également la possibilité d’utiliser grid-column-start: content qui aboutira à la ligne de départ de cette zone de contenu, alors que grid-column- end: content aboutira à la dernière ligne de la zone de contenu.
Cela signifie donc que nous pouvons placer un élément dans la zone de contenu en utilisant le code suivant:
.content {
grille-colonne: contenu / contenu;
}
Ensuite, nous pouvons maintenant améliorer cette technique, car si vous utilisez une ligne nommée pour grille-colonne-début et omettez la ligne de fin (plutôt que de couvrir une piste comme le cas si vous avez utilisé des numéros de ligne), la grille copie le nom sur la dernière ligne. Par conséquent, grille-colonne: contenu est exactement identique à grille-colonne: contenu / contenu;
C’est tout ce dont nous avons besoin pour pouvoir placer des éléments à l’aide de grille-colonne avec un nom simple et unique. Ce comportement est tout à fait comme spécifié et pas une sorte de "bidouille". Cela démontre la profondeur de la réflexion qui a présidé à la création de la spécification Grid Layout et à la somme de travail minutieux nécessaire pour la rendre aussi simple à présenter dans nos conceptions.
Donner à cette technique des superpouvoirs avec un sous-réseau [19659002] Je pense que cette technique est intéressante et permet de déclarer très simplement où les éléments doivent être placés sur la grille. Cependant, si nous ajoutons un support de sous-réseau au mélange, il devient très puissant.
Actuellement, la sous-grille est en cours d’implémentation dans Firefox, de sorte que les exemples suivants nécessitent l’exécution de Firefox Nightly. Vous pouvez télécharger Nightly here .
La sous-grille des grilles-modèle-colonnes et des grilles-modèles-grilles signifie que Le dimensionnement créé sur une grille parente peut être activé par un élément qui est un enfant de la grille (en supposant qu'il utilise également la présentation de grille) en appliquant display: grid .
Note : Vous pouvez en savoir plus sur les fonctionnalités de la sous-grille dans mes articles ici dans Smashing Magazine « CSS Grid Level 2: Voici la sous-grille » et « Creuser dans la propriété d'affichage: Grilles All the Way Down ”.
Les noms de ligne du parent sont transférés dans des sous-réseaux
En plus des informations de dimensionnement de piste transférées dans la grille enfant, tous les noms de ligne définis pour le parent sont transmis. Cela signifie que nous pouvons utiliser nos «noms de colonne» au sein de composants sous-quadrillés, ce qui rend cette solution très utile dans un monde où débarrassé existe. Un élément placé dans contenu – même s'il est imbriqué dans des sous-réseaux – s'alignera avec un élément placé comme enfant direct de la grille principale.
Dans cet exemple, j'ai imbriqué deux éléments directement à l'intérieur du div avec une classe de full-2 . J'ai également placé un ul dans .content . Si nous examinons les éléments à l'intérieur de full-2 afin de les placer sur la grille parente, nous devons faire du sélecteur full-2 une grille avec l'affichage : grid utilise ensuite la propriété grid-template-columns avec une valeur de sous-grille .
Ceci provoque la grille sur .full-2 à utilisez les pistes définies dans la grille parente et accédez aux lignes nommées qui y sont définies. Comme il s’agit d’un élément pleine largeur, il se comportera comme la grille parente en ce qui concerne le placement de nos éléments. Nous pouvons ensuite utiliser n'importe quel nom défini pour les différentes colonnes pour placer les éléments. Dans ce cas, j'ai placé les deux éléments enfants dans grille-colonne: centre et ils s'affichent l'un après l'autre dans cette zone centrale.
.full-2 {
rangée de grille: 4;
grille-colonne: complète;
affichage: grille;
intervalle de rangée: 10 px;
grid-template-columns: sous-grille;
}
.full-2> div {
couleur de fond: rgb (124 222,220);
grille-colonne: centre;
}
Si nous jetons un coup d'œil à notre imbriquée ul dans .content nous devrons créer une sous-grille sur le sélecteur .content exactement comme pour le dernier exemple; lorsque nous faisons cela, le ul tombe dans la première piste de la sous-grille. Si nous voulons disposer les éléments d'écoute sur la sous-grille, nous devons faire deux choses: faire en sorte que ul occupe la même zone que son parent en le plaçant avec grille-colonne: content puis ce qui en fait une grille qui est une sous-grille.
Ceci fait, les éléments de la liste seront disposés par auto-placement dans les pistes de colonne de la sous-grille:
.content {
rangée de grille: 1;
grille-colonne: contenu;
affichage: grille;
grid-template-columns: sous-grille;
}
.content ul {
grille-colonne: contenu;
affichage: grille;
intervalle de rangée: 10 px;
grid-template-columns: sous-grille;
}
Une fois que vous avez Dans votre grille, vous pouvez utiliser les noms du parent de la même manière qu'auparavant.
.content li: nth-child (1) {
grille-colonne: centre;
}
.content li: nth-child (2) {
grille-colonne: début-moitié;
}
.content li: nth-child (3) {
grille-colonne: fin-moitié;
}
.content li: nth-child (4) {
grille-colonne: contenu;
}
Si vous utilisez Firefox Nightly, vous pouvez voir la démonstration complète dans cet exemple CodePen:
Voir le stylo [Naming Column and Subgrid] (https://codepen.io/rachelandrew/pen/OJLYRRb) de Rachel Andrew .
Vous pouvez conserver des "sous-réseaux" imbriqués dans votre structure de balisage de la sorte, et à chaque fois, les noms de ligne seront passés. Je pense que cette fonctionnalité sera particulièrement utile.
Lorsque vous créez une sous-grille, les numéros de ligne correspondent aux lignes de la sous-grille et non à la grille parente. Par conséquent, si vous voulez vous assurer que les éléments de la sous-grille sont alignés sur la grille parente, utilisez des noms de ligne ou des zones nommées (comme dans cet exemple) pour simplifier la procédure et la rendre logique.
Wraping Up
Sachez maintenant comment utiliser cette technique pour votre réseau principal. J'espère que nous ne tarderons pas à attendre que nous constations la prise en charge du sous-réseau dans tous les navigateurs. Cela permettra d’utiliser des techniques comme celle-ci et de les rendre incroyablement puissantes.
(il) Source link