Cet article présente quelques lignes de CSS puissantes qui effectuent un travail lourd et vous aident à créer des mises en page modernes et robustes.
Publié le 7 juillet 2020, dernière mise à jour le 15 décembre 2025
Les mises en page CSS modernes permettent aux développeurs d'écrire des règles de style vraiment pertinentes et robustes en quelques frappes. La présentation ci-dessus et cet article examinent 10 lignes de CSS puissantes qui effectuent un travail important.
Pour suivre ou tester ces démonstrations par vous-même, consultez le site intégré ci-dessus ou accédez à 1linelayouts.com.
01. Super Centered : place-items: center
Pour la première mise en page "sur une seule ligne", résolvons le plus grand mystère de l'univers CSS : le centrage des éléments. Sachez que c'est plus facile que vous ne le pensez avec place-items: center.
Spécifiez d'abord grid comme méthode display, puis écrivez place-items: center sur le même élément. place-items est un raccourci permettant de définir à la fois align-items et justify-items. En le définissant sur center, align-items et justify-items sont tous deux définis sur center.
.parent {
display: grid;
place-items: center;
}
Cela permet de centrer parfaitement le contenu dans le parent, quelle que soit sa taille intrinsèque.
02. La crêpe déconstruite : flex: <grow> <shrink> <baseWidth>
Ensuite, nous avons le pancake déconstruit ! Il s'agit d'une mise en page courante pour les sites marketing, par exemple, qui peuvent comporter une ligne de trois éléments, généralement avec une image, un titre, puis du texte décrivant certaines caractéristiques d'un produit. Sur mobile, nous voulons qu'ils s'empilent correctement et qu'ils s'étendent à mesure que nous augmentons la taille de l'écran.
En utilisant Flexbox pour cet effet, vous n'aurez pas besoin de requêtes média pour ajuster l'emplacement de ces éléments lorsque la taille de l'écran change.
Le raccourci flex signifie flex: <flex-grow> <flex-shrink> <flex-basis>.
Par conséquent, si vous souhaitez que vos zones se remplissent jusqu'à leur taille <flex-basis>, qu'elles se réduisent sur les tailles plus petites, mais qu'elles ne s'étirent pas pour remplir un espace supplémentaire, écrivez : flex: 0 1 <flex-basis>. Dans ce cas, votre <flex-basis> est 150px. Il se présente donc comme suit :
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Si vous souhaitez que les cases s'étirent et remplissent l'espace lorsqu'elles passent à la ligne suivante, définissez <flex-grow> sur 1, comme suit :
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Désormais, lorsque vous augmentez ou diminuez la taille de l'écran, ces éléments Flex se réduisent et s'agrandissent.
03. Sidebar Says: grid-template-columns: minmax(<min>, <max>) …)
Cette démonstration utilise la fonction minmax pour les mises en page de grille. Ici, nous définissons la taille minimale de la barre latérale sur 150px, mais sur les écrans plus grands, nous l'étendons à 25%. La barre latérale occupera toujours 25% de l'espace horizontal de son parent jusqu'à ce que ce 25% devienne inférieur à 150px.
Ajoutez-le en tant que valeur de 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 une valeur minmax de 150px à 25%, et le deuxième élément (la section main ici) occupe le reste de l'espace sous la forme d'une seule piste 1fr.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pancake Stack : grid-template-rows: auto 1fr auto
Contrairement à la mise en page "Pancake déconstruit", cet exemple n'ajuste pas ses enfants lorsque la taille de l'écran change. Communément appelée pied de page fixe, cette mise en page est souvent utilisée pour les sites Web et les applications, sur les applications mobiles (le pied de page est généralement une barre d'outils) et les sites Web (les applications monopages utilisent souvent cette mise en page globale).
L'ajout de display: grid au composant vous donnera une grille à une seule colonne, mais la zone principale ne sera pas plus haute que le contenu, avec le pied de page en dessous.
Pour que le pied de page reste en bas, ajoutez :
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Cela permet de définir le contenu de l'en-tête et du pied de page pour qu'il prenne automatiquement la taille de ses enfants, et d'appliquer l'espace restant (1fr) à la zone principale. La ligne de taille auto prendra la taille du contenu minimal de ses enfants. Ainsi, à mesure que la taille de ce contenu augmente, la ligne elle-même s'agrandit pour s'ajuster.
05. Mise en page classique du Saint Graal : grid-template: auto 1fr auto / auto 1fr auto
Cette mise en page classique de type "Saint Graal" comporte un en-tête, un pied de page, une barre latérale gauche, une barre latérale droite et un contenu principal. Elle est semblable à la mise en page précédente, mais avec des barres latérales.
Pour écrire l'intégralité de cette grille à l'aide d'une seule ligne de code, utilisez la propriété grid-template. Cela vous permet de définir à la fois les lignes et les colonnes.
La paire propriété/valeur est : grid-template: auto 1fr auto / auto 1fr auto. La barre oblique entre la première et la deuxième liste séparée par des espaces correspond à la séparation entre les lignes et les colonnes.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Comme dans l'exemple précédent, où l'en-tête et le pied de page avaient un contenu dimensionné automatiquement, les barres latérales gauche et droite sont ici dimensionnées automatiquement en fonction de la taille intrinsèque de leurs enfants. Cependant, cette fois, il s'agit de la taille horizontale (largeur) au lieu de la taille verticale (hauteur).
06. Grille à 12 colonnes : grid-template-columns: repeat(12, 1fr)
Ensuite, nous avons un autre classique : la grille à 12 colonnes. Vous pouvez rapidement écrire des grilles en CSS avec la fonction repeat(). En utilisant repeat(12, 1fr); pour les colonnes du modèle de grille, vous obtenez 12 colonnes de 1fr chacune.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Maintenant que vous disposez d'une grille de 12 colonnes, vous pouvez y placer les éléments enfants. Pour ce faire, vous pouvez les placer à l'aide de lignes de grille. Par exemple, grid-column: 1 / 13 s'étend de la première à la dernière ligne (13e) et s'étend sur 12 colonnes. grid-column: 1 / 5; s'étendrait sur les quatre premiers.
Vous pouvez également l'écrire à l'aide du mot clé span. Avec span, vous définissez la ligne de départ, puis le nombre de colonnes à couvrir à partir de ce point de départ. Dans ce cas, grid-column: 1 / span 12 équivaudrait à grid-column: 1 / 13 et grid-column: 2 / span 6 à grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Repeat, Auto, MinMax) : grid-template-columns(auto-fit, minmax(<base>, 1fr))
Pour ce septième exemple, combinez certains des concepts que vous avez déjà appris pour créer une mise en page responsive avec des enfants flexibles et placés automatiquement. Génial. Les termes clés à retenir ici sont repeat, auto-(fit|fill) et minmax()', que vous connaissez sous l'acronyme RAM.
Voici à quoi ressemble l'ensemble :
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Vous utilisez à nouveau repeat, mais cette fois avec le mot clé auto-fit au lieu d'une valeur numérique explicite. Cela permet de placer automatiquement ces éléments enfants. Ces éléments enfants ont également une valeur minimale de base de 150px avec une valeur maximale de 1fr. Cela signifie que sur les écrans plus petits, ils occuperont toute la largeur de 1fr, et qu'à mesure qu'ils atteindront une largeur de 150px chacun, ils commenceront à s'afficher sur la même ligne.
Avec auto-fit, les cases s'étirent lorsque leur taille horizontale dépasse 150 px pour remplir tout l'espace restant. Toutefois, si vous remplacez cette valeur par auto-fill, ils ne s'étireront pas lorsque leur taille de base dans la fonction minmax sera dépassée :
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Line Up: justify-content: space-between
Pour la mise en page suivante, le point principal à démontrer ici est justify-content: space-between, qui place les premier et dernier éléments enfants sur les bords de leur cadre de délimitation, l'espace restant étant réparti uniformément entre les éléments. Pour ces fiches, elles sont placées dans un mode d'affichage Flexbox, avec la direction définie sur "column" à l'aide de flex-direction: column.
Le titre, la description et le bloc d'image sont ainsi placés dans une colonne verticale à l'intérieur de la carte parente. Ensuite, l'application de justify-content: space-between ancre le premier élément (titre) et le dernier élément (bloc d'image) aux bords de la flexbox, et le texte descriptif entre ces éléments est placé à égale distance de chaque point de terminaison.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Clamping My Style : clamp(<min>, <actual>, <max>)
Nous allons maintenant aborder certaines techniques qui ont des implications très intéressantes pour les mises en page et la conception d'UI responsives. Dans cette démonstration, vous allez définir la largeur à l'aide de clamp, comme suit : width: clamp(<min>, <actual>, <max>).
Cela définit une taille minimale et maximale absolue, ainsi qu'une taille réelle. Avec des valeurs, cela peut ressembler à ceci :
.parent {
width: clamp(23ch, 60%, 46ch);
}
La taille minimale est de 23ch ou 23 caractères, et la taille maximale est de 46ch ou 46 caractères. Les unités de largeur de caractère sont basées sur la taille de police de l'élément (plus précisément, la largeur du glyphe 0). La taille "réelle" est de 50 %, ce qui représente 50 % de la largeur du parent de cet élément.
Ici, la fonction clamp() permet à cet élément de conserver une largeur de 50 % jusqu'à ce que 50 % soit supérieur à 46ch (sur les fenêtres d'affichage plus larges) ou inférieur à 23ch (sur les fenêtres d'affichage plus petites). Vous pouvez voir que lorsque j'étire et réduis la taille du parent, la largeur de cette fiche augmente jusqu'à son point maximal limité et diminue jusqu'à son point minimal limité. Il reste ensuite centré dans le parent, car nous avons appliqué des propriétés supplémentaires pour le centrer. Cela permet d'obtenir des mises en page plus lisibles, car le texte ne sera ni trop large (plus de 46ch), ni trop écrasé et étroit (moins de 23ch).
C'est également un excellent moyen d'implémenter une typographie responsive. Par exemple, vous pouvez écrire : font-size: clamp(1.5rem, 20vw, 3rem). Dans ce cas, la taille de police d'un titre reste toujours comprise entre 1.5rem et 3rem, mais augmente et diminue en fonction de la valeur réelle de 20vw pour s'adapter à la largeur de la fenêtre d'affichage.
C'est une excellente technique pour garantir la lisibilité avec une valeur de taille minimale et maximale.
10. Respect du format : aspect-ratio: <width> / <height>
Enfin, cette dernière mise en page résout un problème fréquemment rencontré : conserver le format d'une image.
Avec la propriété aspect-ratio, lorsque je redimensionne la fiche, le bloc visuel vert conserve ce format 16:9. Nous respectons le format avec aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Pour conserver un format 16:9 sans cette propriété, vous devez utiliser une astuce padding-top et lui attribuer une marge intérieure de 56.25% pour définir un rapport hauteur/largeur. Nous ajouterons bientôt une propriété pour éviter cette astuce et le calcul du pourcentage. Vous pouvez créer un carré avec un ratio 1 / 1, un ratio de 2 pour 1 avec 2 / 1, et tout ce dont vous avez besoin pour que cette image soit mise à l'échelle avec un ratio de taille défini.
.square {
aspect-ratio: 1 / 1;
}
Cette fonctionnalité est utile, car elle résout de nombreux problèmes 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 parcours à travers 10 lignes de CSS puissantes. Pour en savoir plus, regardez l'intégralité de la vidéo.