Dix mises en page modernes dans une ligne CSS

Cet article met en évidence certaines lignes puissantes de CSS qui font du gros travail et vous aident à créer des mises en page modernes solides.

7 juillet 2020

Les mises en page CSS modernes permettent aux développeurs d'écrire des règles de style vraiment significatives et robustes en quelques touches. L'exposé ci-dessus et cet article examinent ensuite 10 lignes de CSS puissantes qui font beaucoup de travail.

Pour suivre ou jouer à ces démos par vous-même, consultez l'encart Glitch ci-dessus ou visitez 1linelayouts.glitch.me.

01. Supercentre: lieu-items: centre

Pour la première mise en page `` à une seule ligne '', résolvons le plus grand mystère de tout le domaine CSS: centrer les choses. Je veux que tu saches que c'est plus facile que tu ne le penses avec lieu-items: centre.

Précisez d'abord la grille comme lui affichage méthode, puis écrivez lieu-items: centre dans le même élément. objets de lieu est une manière abrégée de définir les deux align-items y justify-items Tout de suite. Le mettre en centre, les deux align-items y justify-items sont configurés pour centre.

.parent {
 affichage : grille ;
 lieu-items : centre ;
 }

Cela permet au contenu d'être parfaitement centré dans le parent, quelle que soit sa taille intrinsèque.

02. La crêpe déconstruite: fléchir:

Ensuite, nous avons la crêpe déconstruite! Il s'agit d'une mise en page courante pour les sites marketing, par exemple, qui peut comporter une rangée de 3 éléments, généralement avec une image, un titre, puis du texte, décrivant certaines caractéristiques d'un produit. Sur les appareils mobiles, nous voulons qu'ils s'empilent bien et se développent à mesure que nous augmentons la taille de l'écran.

En utilisant Flexbox pour cet effet, vous n'aurez pas besoin de requêtes multimédias pour ajuster l'emplacement de ces éléments lorsque l'écran est redimensionné.

Les fléchir abréviation signifie: fléchir:.

Donc, si vous voulez que vos boîtes soient remplies à votre taille, rétrécissez dans des tailles plus petites, mais pas s'étirer pour remplir les espaces supplémentaires, tapez: flex: 0 1. Dans ce cas, votre c'est 150 px donc ça ressemble à ceci:

.parent {
 affichage : flex ;
 }

 .child {
 flex : 0 1 150px ;
 }

Si tu Fabriquer vous voulez que les cases s'étirent et remplissent l'espace lorsqu'elles passent à la ligne suivante, définissez le à 1, donc cela ressemblerait à ceci:

.parent {
 affichage : flex ;
 }

 .child {
 flex : 1 1 150px ;
 }

Désormais, à mesure que la taille de l'écran augmente ou diminue, ces éléments flexibles se rétrécissent et se développent.

Cette démo profite de min max fonction pour les dispositions de grille. Ce que nous faisons ici, c'est de définir la taille minimale de la barre latérale sur 150 px, mais sur des écrans plus grands, ce qui permet de l'étendre à 25%. La barre latérale occupera toujours 25% de l'espace horizontal de son père jusqu'à 25% devient plus petit que 150 px.

Ajoutez-le en tant que valeur grid-template-columns avec la valeur suivante:
minmax (150px, 25%) 1fr. L'élément de la première colonne (la barre latérale dans ce cas) obtient un min max de 150 px à 25%, et le deuxième élément (le principale section ici) occupe le reste de l'espace comme un seul 1fr Piste.

.parent {
 affichage : grille ;
 grille-modèle-colonnes : minmax ( 150px , 25% ) 1fr ;
 }

04. Pile de crêpes: grid-template-rows: auto 1fr auto

Contrairement à Deconstructed Pancake, cet exemple n'enveloppe pas ses enfants lorsque la taille de l'écran change. Mieux connu sous le nom de pied de page collant, cette mise en page est souvent utilisée à la fois pour les sites Web et les applications, dans les applications mobiles (le pied de page est généralement une barre d'outils) et les sites Web (les applications à page unique utilisent souvent cette mise en page globale).

Ajouter affichage: grille le composant donnera une grille à une seule colonne, mais la zone principale ne sera que la hauteur du contenu avec le pied de page en dessous.

Pour que le pied de page colle à la fin, ajoutez:

.parent {
 affichage : grille ;
 grid-template-rows : auto 1fr auto ;
 }

Cela définit le contenu de l'en-tête et du pied de page pour prendre automatiquement la taille de leurs enfants et appliquer l'espace restant (1fr) à la zone principale, tandis que le voiture La taille de la ligne prendra la taille du contenu minimum de ses enfants, donc à mesure que la taille du contenu augmente, la ligne elle-même s'agrandira.

05. Arrangement classique du Saint Graal: grille-modèle: auto 1fr auto / auto 1fr auto

Pour cette mise en page classique du Saint Graal, il existe un en-tête, un pied de page, une barre latérale gauche, une barre latérale droite et un contenu principal. Il est similaire au design précédent, mais maintenant avec des barres latérales!

Pour écrire toute cette grille en utilisant une seule ligne de code, utilisez le grille-modèle propriété. Cela vous permet de définir des lignes et des colonnes en même temps.

La paire propriété et valeur est: grille-modèle: auto 1fr auto / auto 1fr auto. La barre oblique entre les première et deuxième listes séparées par des espaces est le saut entre les lignes et les colonnes.

.parent {
 affichage : grille ;
 grille-modèle : auto 1fr auto / auto 1fr auto ;
 }

Comme dans le dernier exemple, où l'en-tête et le pied de page avaient un contenu auto-dimensionné, ici les barres latérales gauche et droite sont automatiquement dimensionnées en fonction de la taille intrinsèque de leurs enfants. Cependant, cette fois, il est de taille horizontale (largeur) au lieu de verticale (hauteur).

06. Grille de 12 sections: grid-template-columns: répéter (12, 1fr)

Ensuite, nous avons un autre classique: la calandre à 12 baies. Vous pouvez rapidement écrire des grilles en CSS avec le répéter () une fonction. Utilisant: répéter (12, 1fr); pour les colonnes du modèle de grille, il vous donne 12 colonnes chacune 1fr.

.parent {
 affichage : grille ;
 grille-modèle-colonnes : répéter ( 12 , 1fr ) ;
 }

 .child-span-12 {
 grille-colonne : 1/13;
 }

Maintenant que vous avez une grille de piste à 12 colonnes, nous pouvons placer nos enfants sur la grille. Une façon de faire serait de les placer en utilisant des lignes de quadrillage. Par exemple, grille-colonne: 1/13 il s'étendrait de la première ligne à la dernière (13) et s'étendrait sur 12 colonnes. grille-colonne: 1/5; couvrirait les quatre premiers.

Une autre façon d'écrire ceci est d'utiliser le portée Mot-clé. Avec portée, définit la ligne de départ, puis le nombre de colonnes à couvrir à partir de ce point de départ. Dans ce cas, grille-colonne: 1 / span 12 serait équivalent à grille-colonne: 1/13y grille-colonne: 2 / span 6 serait équivalent à grille-colonne: 2/8.

.child-span-12 {
 grille-colonne : 1 / span 12 ;
 }

07. RAM (Répéter, Auto, MinMax): grid-template-columns (ajustement automatique, minmax ( , 1fr))

Pour ce septième exemple, combinez certains des concepts que vous avez déjà appris pour créer une mise en page réactive avec des enfants flexibles et placés automatiquement. Ça a l'air bien. Les termes clés à retenir ici sont répéter, auto- (ajustement | remplissage)y min max () ', rappelé par l'acronyme RAM.

Dans l'ensemble, cela ressemble à:

.parent {
 affichage : grille ;
 grid-template-columns : répéter ( auto-fit , minmax ( 150px , 1fr ) ) ;
 }

Vous utilisez à nouveau la répétition, mais cette fois, en utilisant le ajustement automatique mot clé au lieu d'une valeur numérique explicite. Cela permet le placement automatique de ces éléments enfants. Ces enfants ont également une valeur de base minimale de 150 px avec une valeur maximale 1fr, c'est-à-dire que sur des écrans plus petits, ils occuperont tout le 1fr large, et à mesure qu'ils atteignent 150 px large chacun, commencera à couler vers la même ligne.

Avec ajustement automatique, les boîtes s'étirent lorsque leur taille horizontale dépasse 150 pixels pour remplir tout l'espace restant. Cependant, si vous changez ceci en remplissage automatique, ils ne s'étirent pas lorsque leur taille de base est dépassée dans la fonction minmax:

.parent {
 affichage : grille ;
 grid-template-columns : répéter ( remplissage automatique , minmax ( 150px , 1fr ) ) ;
 }

08. Alignement: justify-content: espace entre

Pour la conception suivante, le principal point à démontrer ici est justify-content: espace entre, qui place le premier et le dernier élément enfant sur les bords de sa boîte englobante, l'espace restant étant uniformément réparti entre les éléments. Pour ces cartes, elles sont placées dans un mode d'affichage Flexbox, avec l'adresse définie sur colonne en utilisant flex-direction: colonne.

Cela place le titre, la description et le bloc d'image dans une colonne verticale de la carte principale. Alors, en appliquant justify-content: espace entre ancre le premier (titre) et le dernier (bloc d'image) éléments aux bords de la boîte flexible, et le texte descriptif entre eux est placé à égale distance à chaque extrémité.

.parent {
 affichage : flex ;
 flex-direction : colonne ;
 justify-content : espace entre ;
 }

09. Tenez mon style: pince ( , , )

C'est là que nous entrons dans certaines techniques avec moins de support du navigateur, mais ils ont des implications vraiment intéressantes pour la conception et la mise en page de l'interface utilisateur réactive. Dans cette démo, vous définissez la largeur à l'aide d'une pince comme suit: largeur: pince ( , , ).

Cela définit une taille minimale et maximale absolue et une taille réelle. Avec des valeurs, cela peut ressembler à ceci:

.parent {
 largeur : pince ( 23ch , 50% , 46ch ) ;
 }

La taille minimale ici est 23 canaux ou 23 unités de caractères, et la taille maximale est 46 canaux, 46 caractères. Unités de largeur de caractère sont basées sur la taille de la police de l'élément (en particulier la largeur du 0 glyphe). La taille «réelle» est 50%, qui représente le 50% de la largeur principale de cet élément.

Quoi pince () La fonction que vous faites ici est de permettre à cet élément de conserver une largeur 50% jusqu'à ce que 50% est supérieur à 46 canaux (dans des fenêtres plus grandes) ou plus petit que 23 canaux (dans des fenêtres plus petites). Vous pouvez voir que lorsque j'étire et rétrécis la taille principale, la largeur de cette carte augmente jusqu'à son point de serrage maximum et diminue jusqu'à son point de serrage minimum. Il reste ensuite centré sur le parent car nous avons appliqué des propriétés supplémentaires pour le centrer. Cela permet des mises en page plus lisibles, car le texte ne sera pas trop large (ci-dessus 46 canaux) ou trop écrasé et étroit (moins de 23 canaux).

C'est également un excellent moyen d'implémenter une typographie réactive. Par exemple, vous pouvez écrire: font-size: pince (1.5rem, 20vw, 3rem). Dans ce cas, la taille de la police d'un titre resterait toujours entre 1,5rem y 3rem mais il grandirait et rétrécirait en fonction de la 20vw valeur réelle pour s'adapter à la largeur de la fenêtre.

C'est une excellente technique pour assurer la lisibilité avec une valeur de taille minimale et maximale, mais rappelez-vous qu'elle n'est pas prise en charge par tous les navigateurs modernes, alors assurez-vous d'avoir des alternatives et faites vos tests.

10. Respect de l'apparence: ratio d'aspect: /

Et enfin, ce dernier outil de conception est le plus expérimental du groupe. Il a été récemment introduit dans Chrome Canary dans Chromium 84, et il y a un effort actif de Firefox pour l'implémenter, mais il n'est actuellement dans aucune édition de navigateur stable.

Cependant, je tiens à le mentionner car c'est un problème très fréquemment rencontré. Et cela ne fait que conserver le rapport hauteur / largeur d'une image.

Avec lui ratio d'aspect propriété, lors du changement de la taille de la carte, le bloc visuel vert conserve ce rapport hauteur / largeur de 16 x 9. Nous respectons le rapport hauteur / largeur avec rapport hauteur / largeur: 16/9.

.video {
 rapport hauteur / largeur : 16/9;
 }

Pour conserver un rapport hauteur / largeur de 16 x 9 sans cette propriété, vous devez utiliser un rembourrage hacher et donnez-lui une dose de 56.25% pour établir une relation entre le haut et la largeur. Bientôt, nous aurons une propriété pour cela pour éviter le piratage et la nécessité de calculer le pourcentage. Vous pouvez faire un carré avec 1 / 1 ratio, un ratio de 2 à 1 avec 2 / 1, et vraiment tout ce dont vous avez besoin pour redimensionner cette image avec un rapport de taille défini.

.square {
 rapport hauteur / largeur : 1/1;
 }

Bien que cette fonctionnalité soit toujours en plein essor, il est bon de savoir qu'elle résout de nombreux conflits de développeurs auxquels j'ai été confronté à plusieurs reprises, en particulier en ce qui concerne les vidéos et les iframes.

conclusion

Merci d'avoir suivi ce voyage à travers 10 lignes puissantes de CSS. Pour plus d'informations, consultez la vidéo complèteet tester les manifestations vous-même.